神秘的空白空间出现在Safari中的flexbox中

我试图根据这个answer垂直对齐网格列。然而，输出的右上角是一片神秘的空白，我不知道如何填充它。神秘的空白空间出现在Safari中的flexbox中

这是我在浏览器中看到（Safari浏览器版本9.1.2（11601.7.7））：

这里是我的代码：

.equal { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.equal > div[class^='col-'] { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
@media screen and (min-width: 768px) { 
 
    .equal2, 
 
    .equal2 > div[class*='col-'] { 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    flex: 1 0 auto; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <!-- Bootstrap --> 
 
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
    <div class="row equal"> 
 
     <div class="col-xs-6 col-lg-4"> 
 
     <p style="word-wrap: break-word;">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 
 
      <p> 
 
     </div> 
 
     <div class="col-xs-6 col-lg-4"> 
 
     <p style="word-wrap: break-word;">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 
 
      <p> 
 
     </div> 
 
     <div class="col-xs-6 col-lg-4"> 
 
     <p style="word-wrap: break-word;">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 
 
      <p> 
 
     </div> 
 
     <div class="col-xs-6 col-lg-4"> 
 
     <p style="word-wrap: break-word;">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 
 
      <p> 
 
     </div> 
 
     <div class="col-xs-6 col-lg-4"> 
 
     <p style="word-wrap: break-word;">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 
 
      <p> 
 
     </div> 
 
     <div class="col-xs-6 col-lg-4"> 
 
     <p style="word-wrap: break-word;">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 
 
      <p> 
 
     </div> 
 
     <div class="col-xs-6 col-lg-4"> 
 
     <p style="word-wrap: break-word;">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 
 
      <p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

来源

2016-09-25 Sun Qingyao

您可以在其他浏览器中通过重新创建这个（https://jsbin.com [放置在伪元素clearfix的内容不同的字符。]/zixabu /编辑？HTML，CSS，输出）。删除伪元素可以解决问题。 – misterManSam

所以这是一个不寻常的情况，这似乎是Safari独有的。

但是在游戏中使用巨大的Bootstrap风格，奇怪的事情可能会发生。

您在row wrap容器（row equal）中有一组弹性项目（div[class^="col-"]）。

每个项目有一个width: 50%,box-sizing: border-box和margin: 0，全部由Bootstrap应用。

由于填充和边框包含在50％中，并且没有边距，所以每行都会放入两个项目，每隔三个项目都会放入。这就是Chrome，Firefox，IE11和Edge所发生的情况。

然而，在Safari中，第二个Flex项目正在包装中，在第一行留下一个大的开放空间。

在对代码的粗略回顾中，没有任何我能找到的建议此行为的原因。（我没有解决所有应用的Bootstrap风格。）

但仔细检查呈现的布局显示在第一项的左边空白处有一个微小的间隙（可能为1px）。

这个额外的空间，只出现在Safari中，只在第一个flex项目旁边，强制第二个项目打包。

参照图像的上方，与所述容器的黄色背景显示，而边界中的第一列不对准，错位是明显的。

所以我认为这个问题是可以识别的。

就解决方案而言，我现在可以建议的最好的方法是将第一个项目的大小减少1-2个像素，或者使用相同数量的负数margin-left。沿着这些路线的东西：

.equal > div[class^='col-']:first-child { 
    width: calc(50% - 1px); 
}

revised fiddle

来源

2016-09-25 21:41:40

谢谢！作为一个反馈，应用'width：calc（50％ - 1px）;'产生另一个奇怪的布局：[截图]（http://i.stack.imgur.com/y1s53.png），但是'margin-left： - 1px;'只是给了我预期的结果：[截图]（http://i.stack.imgur.com/rSUvd.png）。 –

神秘的空白空间出现在Safari中的flexbox中

回答

相关问题