文章目录
- 一、兼容性
- 二、兼容问题
- 1. 在IE6下,子级的宽度会撑开父级设置好的宽度
- 2. IE6中,元素浮动,如果宽度需要内容撑开,需要给里面的块元素都添加浮动才可以
- 3. 在IE6、7下,元素要通过浮动排在同一排,就需要给这行元素都加浮动
- 4. 注意标签的嵌套规则
- 5. 在IE6下,元素的高度如果小于19px的时候,会被当成19px来处理,
- 6. 在IE6下不支持1px的 dotted 边框样式
- 7. hasLayout:在IE下大部分兼容性都是因为hasLayout属性的触发问题,尽量出发hasLayout属性,可以减少很多IE下的兼容性的问题。
- 8. IE6下双边距的bug
- 9. 在IE6、7下,li 本身没有浮动, li 里面的内容有浮动,li 下会产生一个间隙
- 10. 在IE6,当一行子级元素宽度之和和父级的宽度相差超过3px,或者子级元素不满行的情况的时候,最后一行的子级元素的margin-bottom会失效
- 11. 在IE6下的文字溢出bug
- 12. 在IE6下,当浮动元素和绝对定位元素是兄弟关系的时候,绝对定位会失效
- 13. 在IE6、7下,子级元素有相对定位,父级overflow包不住子级元素
- 14. 在IE6下,如果绝对定位的父级的宽高是奇数的时候,子级元素的right 和 bottom 值会有1px的偏差
- 15. IE6透明度,使用filter 兼容透明度
- 16. 在IE6、7下,输入型的表单标签控件 上下会有1px的间隙
- 17. 条件注释语句,适配低版本IE时常使用
一、兼容性
兼容性:页面在不同的浏览器中可能会显示不同。开发人员适配不同浏览器的过程就叫兼容性。
二、兼容问题
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 下会产生一个间隙
解决方法:
- 给li 加浮动
- 给li 加 vertical-align:top
- 在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]-->