flexbox在Safari中添加1px的左边距 [英] flexbox adding 1px left margin in Safari

问题描述

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

Flex box css是：

  .equal-height {
 display：-webkit-box; / * OLD  -  iOS 6-，Safari 3.1-6 * / 
 display：-moz-box; / *旧 - 火狐19  - （马车，但主要是作品）* / 
显示：-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; 
 
 $ / code $ 
 
 
 
子元素设置如下：
 
 
  .child-div {
 float：left; 
 display：block; 
 width：33.3333％; 
 box-sizing：border-box; 
 
 
 
 
 
 $ b但是他们已经注意到他们没有浮点计算
解决方案
 file：style.css; 
 line：1028 
  .row：之前，.row：之后{
内容：; 
 display：table; 
 
 $ / code $ / $ p 
 
 
 add：
 
 
  width：100％
  
现在margin是解决了。​​ 
 
 
您使用的网格系统有safari问题：请更改。
 
 
 
希望我已经帮助你。 
I'm having trouble with Safari adding a 1px margin/gap to the left on the first element in a flexbox row. I've attached an image below of the issue:



The flex box css is:
.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;
    }
The child elements are set to the following:
.child-div {
    float: left;
    display: block;
    width: 33.3333%;
    box-sizing: border-box;
}
But they I have noticed that they are computed with no float
解决方案
file: style.css;
line: 1028
.row:before, .row:after{
  content: " ";
  display: table;
}
add:
width: 100%
and now the "margin" is solved.

The grid system you used has problems with safari: change it.

Hope I've helped you.

                        
这篇关于flexbox在Safari中添加1px的左边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！