6-普遍的IE5、CSS兼容性问题总结
day06 CSS兼容性问题
第⼀部分：
1，浏览器默认样式
问题：
有些浏览器默认会给⼀些标签添加⼀些样式，并且不同浏览器添加的样式不相同，这样会导致我们布局的页⾯在不同浏览器发⽣错乱
解决：
清除默认样式，保证在每个浏览器样式统⼀
body,p,ul,h1,h2,h3,h4,h5,h6,ol,dl,dd,form,input,ul,ol{
marigin:0;
padding:0;
list-style:none;
font-weight:normal;
}
img{border:none;}
2，img标签底部间隙问题
问题：
div中包含⼀张图⽚，底部可能有2px,4px或更多的间隙，不同的font-size会影响这个间隙的⼤⼩。
解决：
1.将图⽚的垂直对其⽅式vertical-align，值为top或者bottom
2.将图⽚转换为块元素display:block
3.将包含图⽚的⽗容器的字体⼤⼩设置为0，font-size:0
3，img标签IE下图⽚有边框
问题：
html图⽚img加了超链接之后产⽣蓝⾊边框（IE6~10）
解决：
img{border:none;}
4，margin上下边框合并问题
问题：
两个div容器，如果同时给上下两个div都加外边框的话，会发⽣边框合并
div{
border: 1px solid gray;
width: 100px;
height: 100px;
}
<{
margin-bottom: 30px;
}
div.two{
margin-top: 50px;
}
one和two相距50px
解决：
只给⼀个容器调整外边框即可，不要同时给两个
5，IE6双倍边距bug    [出现双边距的条件是当浮动元素的浮动⽅向和margin的⽅向⼀致时才会出现]
问题：
当我们给元素添加浮动的并指定左外边距的时候，IE5,6会出现双倍边距
div.outer{
width: 100px;
height: 100px;
margin-left: 10px;
float:left;
display: inline;
}
解决：
给浮动的元素指定display:inline;
6，⽗容器（⼦元素浮动）⾼度为0
问题：
⽗元素的⾼度不确定，且⼦元素个数不确定，⽽且还是float会引发⽗元素⾼度为0问题，浮动的⼦元素层级⾼于⽗元素导致撑不开⽗元素的⾼度
解决：
在使⽤float元素的⽗元素结束前加⼀个⾼度为0宽为0且有clear:both样式的空DIV
<div ></div>
在⽗元素上添加overflow:hidden
8，IE6不⽀持固定定位  fixed
解决：
div{
width:100px;
height:100px;
border:1px solid gray;
position:fixed;
bottom:20px;
right:30px;
/*---ie6---*/
position:absolute;
top:expression(eval(document.documentElement.scrollTop+200));
}
*html{
background-image:url(blank:about);
background-attachment:absolute;
}
9，CSS hack
.bb{
background-color:#f1ee18;/*所有识别*/
background-color:#00deff\9;/*IE6,7,8识别*/
+background-color:#f1ee18;/*IE6,7识别*/
_background-color:#f1ee18;/*IE6识别*/
}
（注意） 不同浏览器解析盒⼦模型的差异：
IE5、IE6盒⼦  width = 内容 + border + paddingcssclass属性
盒⼦占据的宽度 = margin*2+width
盒⼦占据的⾼度 = margin*2+height
盒⼦实际的宽度 = width
盒⼦实际的⾼度 = height
W3C盒⼦ width = 内容
盒⼦占据的宽度 = margin*2+border*2+padding*2+width
盒⼦占据的⾼度 = margin*2+border*2+padding*2+height
盒⼦实际的宽度 = border*2+padding*2+width
盒⼦实际的⾼度 = border*2+padding*2+height
3） 设置浏览器去遵循w3c标准
只需要在⽹页的顶部加上DOCTYPE声明即可
!important的使⽤
p{
color:red !important;
color:blue;
}
当不加!important；的时候，后者覆盖前者，当加上之后说明第⼀个，样式优先级更⾼，采⽤前者，但是Ie6不⽀持!important;
***********************************************
1.常见兼容性问题有哪些？
1) img有间隙(与盒⼦)
2) img有边框(与超链接)
3) 双倍边距(float:left;margin-left:10)
2.解决兼容性问题的⽅法
1) !important
ie7,ie8,firefox,chrome等⾼端浏览器下，已经可以识别
2) CSS hack
1. 注释法
通常⽤于head标签内部，通过link引⽤不同的css
<!--[if IE]>
<link href="ie.css" />
<![endif]-->
<!--[if ! IE]>
<link href="fie.css" />
<![endif]-->
<!--[if IE 6]>
<link href="ie6.css" />
<![endif]-->
2. 属性前缀法
1.  _和-  ：仅IE6⽀持
2.  *    ：IE6、E7⽀持
⽤于css属性前
#tip{
background:blue;/*Firefox背景变蓝⾊ 所有浏览器都⽀持*/
*background:black;/*IE7背景变⿊⾊ IE6、7⽀持⼜⼀次覆盖上⾯样式*/
_background:orange;/*IE6背景变橘⾊ 紧IE6⽀持⼜⼀次覆盖上⾯样式*/
}
1.  \9    ：所有IE浏览器都⽀持
2.  \0    ：IE8、IE9⽀持，opera部分⽀持
3.  \9\0  ：IE8部分⽀持、IE9⽀持
4.  \0\9  ：IE8、IE9⽀持
⽤于属性值后
#tip{
background:red\9;/*IE8背景变红⾊ IE6、7、8、9⽀持覆盖上⾯样式*/
}
3) meta⽅法
使⽤X-UA-Compatible来设置IE浏览器兼容模式
<head>
<meta http-equiv="X-UA-Compatible" content=""></meta>
</head>
常见布局
1.⾏级布局
2.列级布局
3.定位布局
----------
4.复杂布局
⼀⾏中多个⼦级元素有边框，并且宽度是经过严格计算，这时候不能全部浮动，否则会全部错位
<div class="outer">
<div class="inner1"></div>
<div class="inner2"></div>
<div class="inner3"></div>
</div>
前提：有边框；宽度严格计算
inner1    左浮动
inner2  左浮动
inner3  不浮动，margin-left
inner1    左浮动
inner2  左浮动
inner3  右浮动
不需要指定inner2的右外边距以及inner3左外边距
相对定位
IE兼容性
⾃适应布局（计算屏幕分辨率，浏览器视⼝⼤⼩ JS）
1.⾃⼰⾼度决定⽗级⾼度
<div class="outer">
<div class="inner"></div>
</div>
outer不指定⾼度
inner指定⾼度，内边距，边框 外边距
outer的⾼度=
inner⾼度+inner内边距+边框
---如果outer{overflow:hidden} 让⽗级的边界与⼦级的边界重合---    outer的⾼度=
inner⾼度+inner内边距+边框+外边距
⽗级{overflow:hidden}
1)⽗级宽⾼指定： 超过部分隐藏
2)⽗级宽⾼没有指定，⼦级浮动，清除⼦级浮动
3)⽗级宽⾼没有指定，⼦级不浮动，⽗级的内边紧贴⼦级外边
兄弟{overflow:hidden}
one浮动，two不浮动
two如果{overflow:hidden}
two位于⼀列

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。