flexbox 在 Safari 中添加 1px 左边距

Posted 2023-03-07

【中文标题】flexbox 在 Safari 中添加 1px 左边距

【英文标题】：flexbox adding 1px left margin in Safari

【发布时间】：2016-03-12 18:13:27

【问题描述】：

Safari 在 flexbox 行的第一个元素的左侧添加 1px 边距/间隙时遇到问题。我在下面附上了问题的图片：

flex box css是：

.equal-height 
        display: -webkit-box;      /* OLD - ios 6-, Safari 3.1-6 */
        display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox;      /* TWEENER - IE 10 */
        display: -webkit-flex;     /* NEW - Chrome */
        display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
        -webkit-flex-direction: row;
        -webkit-flex-wrap: wrap;
        flex-direction: row;
        flex-wrap: wrap;
    

子元素设置如下：

.child-div 
    float: left;
    display: block;
    width: 33.3333%;
    box-sizing: border-box;

但我注意到它们的计算没有浮点数

【问题讨论】：

请添加您目前正在使用的任何代码

我刚刚添加了一些 CSS 谢谢肖恩

【参考方案1】：

文件：style.css； 行：1028

.row:before, .row:after
  content: " ";
  display: table;

添加：

width: 100%

现在“边距”解决了。

您使用的网格系统与 safari 存在问题：更改它。

希望我对你有所帮助。

【讨论】：

非常感谢！永远无法追踪到这一点。我现在对 Safari 做了一些进一步的修复，谢谢

【参考方案2】：

不使用浮点数计算它们的原因是flex 取消了它们。 根据flexbox spec：

float 和 clear 对弹性项目没有影响，不要接受它 外流。但是，float 属性仍然可以影响 box 通过影响显示属性的计算值来生成。

所以按照 Michael 的说法，flex 容器上的 100% 宽度是可以的，但是如果你想要 flexbox，你想要的是：

.child-div 
        width: 33.3333%;
        box-sizing: border-box;
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        -webkit-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;

即您需要使用 float 或 flex，但不能同时使用。

您可能想看看这个flexbox generator 以了解 flex 的工作原理。

【参考方案3】：

我也注意到了这一点。这对我有用：

.row:before, .row:after 
  display: none;

【讨论】：

非常感谢，这对我有帮助。

感谢这对我有帮助。