IE和其他浏览器的表现差异：盒子间的空隙，图片变形，justify-content无效

1. 因为想用 border-collapse 合并边框，就想到用table来做某个段落的布局。

结果发现要给td设置圆角border-radius，它天然跟  border-collapse 冲突。

再发现左右两边的td盒子中间，IE和FF都产生了1px的空隙。而CSS初始化中，明明已经都写了margin:0 padding:0，为什么会这样。

先试试给table标签设置  cellspacing="0" cellpadding="0"，问题依旧存在。

于是开始把所有的CSS属性都勾选掉试试看，发现问题出在display:inline-flex 上。原因在于给盒子设置了 display: inline-flex, 或者 display: inline-block。

解决办法就是把html里，td间的换行或者空格删掉或者注释掉。

　    <td></td><!-------

---><td></td>

 

2. DIV，或者P标签，或者随便什么块状元素，如果忘记加固定宽度或者相对比例的宽度，那么，在IE和FF下， 给父容器设置了 display:flex 后，子项目的图片有可能会产生变形，子项目包裹文字的块状元素，文字跑位。

这个文字跑位，是因为刚好给它写了标签切换事件，在IE11下测试，发现文字方向变成竖排，位置就像是设定了绝对定位一样，移动到页面左侧。解决办法就是给它设定宽度。

这个问题只发生在IE（发现也发生在Safari浏览器），不知道算不算IE的bug。也许IE是不苟言笑的标准浏览器，不像Chrome那么贴心...自动补全你偷的懒、你疏忽掉的细节...

 

3. 设置flex-direction: column，容器高度如果小于子项目（比如文字内容撑起的高度），设置 justify-content 在IE下无效。

找到了原因，那么开始想解决办法。给子容器再包一层容器，这个新晋的爸爸容器不设定高度，原来的容器变成祖父辈的容器。在祖父容器设定比较小的高度，但不设置 justify-content 和  flex-direction: column; 

而是在喜当爹的父容器里设置这些属性。具体看代码：

    <style type="text/css">

        .xytfd_title{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 1000px;
            margin: 50px auto 0;
            height: 50px;
            box-sizing: border-box;
        }
        .title_01{
            border-top: 1px solid #bab8b8;
            flex: auto;
            display: block;
        }
        .title_02{
            font-size: 40px;
            color: #2380cc;
            padding: 0 30px;
            text-align: center;
            display: flex;
            /*flex-direction: column;*/
            /*justify-content: center;*/
            align-items: center;
            line-height: 36px;
            height: 36px;
            border-left: 1px solid #bab8b8;
            border-right: 1px solid #bab8b8;
        }
        .xytfd_title h3 {
            font-size: 40px;
            color: #2380cc;
            padding: 0 30px;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            /*line-height: 36px;*/
            /*height: 36px;*/
            /*border-left: 1px solid #bab8b8;*/
            /*border-right: 1px solid #bab8b8;*/
        }
        .xytfd_title h3 span{
            font-size: 14px;
            color: #bab8b8;
            display: block;
        }
        .xytfd_icon {
            margin-top: 20px;
        }
        .xytfd_icon img{
            width: 16px;
            display: block;
            margin: 0 auto;
        }
    </style>
    <script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<section class="xytfd_banner">
    <div class="xytfd_title">
        <span class="title_01"></span>
        <div class="title_02">
            <h3>
                <b>埋下一座城，关了所有灯</b>
                <span>Buried city, to shut all lights</span>
            </h3>
        </div>
        <span class="title_01"></span>
    </div>
    <div class="xytfd_icon">
        <img src="images/icon_banner.jpg" alt="">
    </div>
</section>
</body>

在IE和FF和Chrome下，总算都正常了...如图：

posted @ 2017-07-14 08:38  kiera  阅读(3278)  评论(0)  编辑  收藏  举报