网页兼容性

矫情吗；* 2022-03-16 09:38 321阅读 0赞

记录IE6\\7下常见的问题

## 1、H5标签兼容 ##

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

## 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：][BFC]块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。  
> 块格式化上下文对浮动定位（参见 float）与清除浮动（参见 clear）都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠（Margin collapsing）也只会发生在属于同一BFC的块级元素之间。

[BFC]: https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context