网页兼容性

记录IE67下常见的问题

1、H5标签兼容

H5的新加入的标签在IE67下无用
解决办法:检测是否有这个标签, 如没有则自己定义一个标签,但要注意自定义标签默认是内联元素,没有宽和高
现在有成熟的js插件可以解决这个兼容性问题

 <script>
        document.createElement("header");
        document.createElement("section");
        document.createElement("footer");
    </script>
    <style>
        header{
            width: 200px;
            height: 200px;
            display: block;
            background-color: red;
        }
        section{
            width: 150px;
            height: 150px;
            display: block;
            background-color: yellow;
        }
        footer{
            width: 100px;
            height: 100px;
            display: block;
            background-color: blue;
        }
    </style>
<body>
<header>header</header>
<section>section</section>
<footer>footer</footer>
</body>

2、元素浮动之后

能设置宽度的话就给元素加宽度,如果需要宽度把内容撑开,就给它里面的块元素加上浮动,外层元素清除浮动(overflow:hidden;)清除浮动后外层元素就会有高度
在IE中:浮动元素中增加块元素,两个元素会变成两行
原因:浮动和块元素的display:block冲突
解决方案:块元素中加入float属性,使其浮动

3、第一块元素浮动,第二块元素加margin值等于第一块元素的宽度

IE6中会有间隙问题
解决方案:第二块也用浮动进行布局

4、IE6下子元素超过父级宽高,会把父级的宽高撑开

其他浏览器中,父级会包不住子元素
解决方案:不建议子元素的宽高超过父级

5、p包含块元素的嵌套规则

在其他浏览器中,不允许p包含div元素
p、td、h1~n 标签不能嵌套块元素

6、margin兼容性

margin-top会传递
上下margin叠压
margin-top解决方案:触发BFC和haslayout(overflow:hidden;zoom:1;)
上下margin叠压:触发条件:同级元素有margin时,上下元素的margin-bottom和margin-top会叠压。
解决方案:避免触发条件,改用同一方向的margin,如都设置margin-bottom。

BFC:块格式化上下文(Block Formatting Context,BFC)

是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域。

块格式化上下文对浮动定位(参见 float)与清除浮动(参见

clear)都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局,而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠(Margin

collapsing)也只会发生在属于同一BFC的块级元素之间。

    原文作者:Mandy
    原文地址: https://segmentfault.com/a/1190000018354965
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞