一、兼容性
兼容性:页面在不同的浏览器中可能会显示不同。开发人员适配不同浏览器的过程就叫兼容性。
二、兼容问题
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包不住子级元素
解决方法:给父级也加相对定位文章来源:https://www.toymoban.com/news/detail-620297.html
.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加浮动文章来源地址https://www.toymoban.com/news/detail-620297.html
17. 条件注释语句,适配低版本IE时常使用
<!--[if ie]>
我是IE
<![endif]-->
<!--[if ie 6]>
我是IE 6
<![endif]-->
<!--[if ie 7]>
我是I7
<![endif]-->
<!--[if ie 8]>
我是IE8
<![endif]-->
到了这里,关于HTML兼容性的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!