HTML兼容性

一、兼容性

兼容性：页面在不同的浏览器中可能会显示不同。开发人员适配不同浏览器的过程就叫兼容性。

二、兼容问题

1. 在IE6下，子级的宽度会撑开父级设置好的宽度

提示：盒模型的计算一定要精确，否则IE浏览器可能会显示不同

<style>#box {width: 300px;}.left {width: 200px;background-color: red;height: 300px;float: left;}.right {width: 200px;float: right;}.div {width: 170px;height: 170px;padding: 15px;background: blue;}</style><div id = "box"><div class="left"></div><div class="right"><div class="div"></div></div></div>

2. IE6中，元素浮动，如果宽度需要内容撑开，需要给里面的块元素都添加浮动才可以

<style>#box {width: 400px;}.left {background: red;float: left;}.right {background: yellow;float: right;}h3{margin: 0;height: 40px;float: left;}</style><div id = "box"><div class="left"><h3>左侧</h3></div><div class="right"><h3>右侧</h3></div></div>

3. 在IE6、7下，元素要通过浮动排在同一排，就需要给这行元素都加浮动

<style>#box {width: 400px;}.left {width: 100px;height: 100px;background: red;float: left;}.right {width: 200px;height: 100px;background: blue;/* margin-left: 100px; */float: left;}</style><div id = "box"><div class="left"><h3>左侧</h3></div><div class="right"><h3>右侧</h3></div></div>

4. 注意标签的嵌套规则

5. 在IE6下，元素的高度如果小于19px的时候，会被当成19px来处理，

解决方法：overflow：hidden；

6. 在IE6下不支持1px的 dotted 边框样式

解决方法：切背景平铺

7. hasLayout：在IE下大部分兼容性都是因为hasLayout属性的触发问题，尽量出发hasLayout属性，可以减少很多IE下的兼容性的问题。

在IE下父级有边框的时候，子元素的margin回失效
解决方法：触发父级的 hasLayout 属性

8. IE6下双边距的bug

在IE6下，块元素有浮动有横向的margin 的值的时候，横向的 margin 的值会扩大两倍

.box {width: 200px;height: 200px;background: red;float: left;margin: 100px;display: inline;}
<div class="box"></div>

margin-Left： 一行中左侧的第一个元素有双边距
margin-right： 一行中右侧的第一个元素有双边距

解决方法：display：inline；

9. 在IE6、7下，li 本身没有浮动， li 里面的内容有浮动，li 下会产生一个间隙

解决方法：

1. 给li 加浮动
2. 给li 加 vertical-align：top
3. 在IE6下最小高度的bug 和 li 的间隙问题共存的时候，给li 加浮动， vertical-align 不好使

ul {margin: 0;padding: 0;list-style: none;width: 300px;}li {list-style: none;height: 30px;border: 1px solid #000;float: left;/* vertical-align: top;*/}a {width: 100px;height: 30px;float: left;background: red;}span {width: 100px;height: 30px;float: right;background: blue;}
<ul><li><a href="#"></a><span></span></li><li><a href="#"></a><span></span></li><li><a href="#"></a><span></span></li></ul>

10. 在IE6，当一行子级元素宽度之和和父级的宽度相差超过3px，或者子级元素不满行的情况的时候，最后一行的子级元素的margin-bottom会失效

还没有解决方法，避免出现超过3px，和出现不满行的情况

.box {border: 10px solid red;width: 600px;overflow: hidden;}.box div {width: 100px;height: 100px;background: blue;border: 5px solid #000;margin: 20px;float: left;display: inline;}
<div class="box"><div>1</div><div>2</div><div>3</div><div>4</div><div>1</div><div>2</div><div>3</div><!-- <div>4</div> --></div>

11. 在IE6下的文字溢出bug

子元素的宽度和父级的宽度如果相差小于3px的时候，
两个浮动元素中间的注释或者内联元素，就会出现文字溢出，内联元素越多，溢出越多
解决办法：用div 把注释或者内联元素包起来

.box1 {width: 400px;}.left1 {float: left;}.right1 {float: right;width: 400px;}
<div class="box1"><div class="left1"></div><!-- 上面是left部分--><div><span></span><span></span><span></span></div><div class="right1">右边的部分</div></div>

12. 在IE6下，当浮动元素和绝对定位元素是兄弟关系的时候，绝对定位会失效

解决方法：
不让浮动元素和绝对定位元素是兄弟关系，用div 或者其它标签 把a标签包起来

.box2 {width: 200px;height: 200px;border: 1pc solid #000;position: relative;}.box2 a {position: absolute;width: 40px;height: 40px;background: red;right: 20px;top: 0px;}.box2 ul {width: 150px;height: 150px;background: yellow;margin: 0 0 0 50px;padding: 0;float: left;display: inline;}<div class="box2"><ul></ul><div><a href="#"></a></div></div>

13. 在IE6、7下，子级元素有相对定位，父级overflow包不住子级元素

解决方法：给父级也加相对定位

.box3 {width: 200px;height: 200px;border: 1px solid #000;overflow: auto;position: relative;}.div3 {width: 150px;height: 300px;background: red;position: relative;}<div class="box3"><div class="div3"></div></div>

14. 在IE6下，如果绝对定位的父级的宽高是奇数的时候，子级元素的right 和 bottom 值会有1px的偏差

15. IE6透明度，使用filter 兼容透明度

opacity:0.5;
filter: alpha(opacity=50)

16. 在IE6、7下，输入型的表单标签控件 上下会有1px的间隙

解决方法：给input加浮动

17. 条件注释语句，适配低版本IE时常使用

<!--[if ie]>我是IE<![endif]--><!--[if ie 6]>我是IE 6<![endif]--><!--[if ie 7]>我是I7<![endif]--><!--[if ie 8]>我是IE8<![endif]-->