当前位置:  开发笔记 > 前端 > 正文

flexbox在Safari中添加1px左边距

如何解决《flexbox在Safari中添加1px左边距》经验,为你挑选了2个好方法。

我遇到了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;
}

但他们我注意到他们的计算没有浮动



1> Michael Mamm..:

file:style.css; 行:1028

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

加:

width: 100%

现在"边际"得到了解决.

您使用的网格系统存在safari问题:更改它.

希望我帮助过你.



2> 小智..:

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

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

推荐阅读
雯颜哥_135
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有