实话跟您说，做前端的，得懂点儿CSS不是？可问题是，有些浏览器（比如说IE）看CSS就像看天书似的，导致我们设计的网页在这些浏览器里表现得七零八落。所以，想让网页在IE上跑顺溜了，必须先把CSS在IE里的那点兼容性问题化解掉。接下来，我就告诉你们几个简单好用的CSS编写妙招，帮你们轻松应对这个大难题。
IE对CSS选择器的支持问题
IE在接纳某些CSS选择器这块儿真是有点力不从心，像是CSS3里的那个nth-child()伪类选择器，IE7以下都不支持。甚至IE6及其早期版本也不能愉悦地玩转”+”和”~”这两种同级元素选择器。那么问题来了，我们该怎么办？要不试着用JavaScript耍点花样模仿它们，又或者给CSS加些备胎方案。
听过没，IE6这浏览器有些小毛病，像一些元素的宽度设置是百分比，但它的”source”也是用百分比设定的，这时候那宽度就开始乱挤。别慌，解决这个挺简单的——在”source”的那部分代码里面加个”display:inline-block”，然后把宽度改成100%就搞定了。还有就是，让”source”的属性变过来成”position:relative”，这样问题也能解决~
/* IE6以及以下版本中是无法识别"+"和"~"选择器的 */
ul li + li {
margin-left: 20px; /* 应用于选择器后方的li元素 */
}
ul li ~ li {
padding-left: 10px; /* 应用于紧接着选择器后方的所有li元素 */
}
/* IE6及以下版本中的回退选择器 */
ul li { margin: 0; }
ul li:first-child { margin-left: 20px; }
ul li:last-child { margin-right: 20px; }
浮动元素的布局问题
说起那个麻烦的IE浏览器跳出来的悬浮框，总是要您给出个高，搞得页面乱七八糟。我们会在父元素后面加点空格再设个”clear:both”给他搞定，但到IE那儿，就没那么好使了。这时候咋办？给悬浮框上头的父元素添上”overflow:hidden”的特性试试看，这样不就强行霸占子元素的空间了！
/* 在IE6中,当父元素宽度为百分比时,子元素百分比宽度会出现问题 */
.parent {
width: 50%;
}
.child {
width: 50%;
/* 在IE6中,需要在父元素上设置display:inline-block */
display:inline-block;
}
/* 为了在其他浏览器中保持和IE同样的效果 */
.parent {
width: 50%;
}
.child {
width: 50%;
}
背景和透明度的兼容问题
ie上网页时，好像某个元素被你设置成带背景和透视效果~不过这样做的话，下头的字啊、图啊也可能变得忽明忽暗。别怕，这儿有个小窍门，给它添上个ie专属的滤镜就没问题了
/* 在IE中，绝对定位元素可能会相对于body元素定位 */
.parent {
position: relative;
}
.child {
position: absolute;
top: 50px;
left: 50px;
z-index: 1;
}
边框宽度的处理问题
IE浏览网页时，有时候会发现页面的大小跟实际不太对劲。别担心，咱有办法。调整下CSS边框或者用JavaScript算一算就搞定了。不论是IE还是其他浏览器，展示出的页面都准没错~
/* 在IE中，浮动元素不强制父元素占有高度 */
.parent {
overflow: hidden;
zoom: 1; /* 用于激活IE6和IE7中的hasLayout */
}
.child {
float: left;
width: 50%;
}
链接背景颜色的兼容问题
你用IE浏览器设链接背景颜色时，发现点进去没反应呀？没事儿，只需要加点儿简单的代码就好。这样就能让过去点过和最近点的链接都有好看的背景颜色
实际应用中的更多问题
/* 在IE中，设置背景透明度会影响元素文本和子元素 */
.parent {
background-color: #000;
opacity: 0.5;
/* 在IE中，使用滤镜来添加透明度 */
filter: alpha(opacity=50);
}
可能会碰到一些兼容问题，别急慢慢研究哈～虽然IE有点儿麻烦，但是我们得学，毕竟有些地方还是需要用到的，尤其在老电脑上。
兄弟，我跟你说，IE这东西太费劲了，老是出这那的问题让人抓狂。不过，咱们解决了那些常见的毛病后，IE的网页就能顺利地弹出来咯。加油别纠结了！
/* 在IE6及以下版本中，应该将width宽度设置成.content的宽度 */
.box {
width: 400px;
height: 300px;
padding: 10px;
/* 在IE6及以下版本中，边框和内边距会导致元素实际宽度增加 */
border: 1px solid #000;
background-color: #fff;
}
/* 在其他浏览器中，边框和内边距不会导致元素实际宽度增加 */
.box {
width: 422px;
height: 322px;
padding: 10px;
border: 1px solid #000;
background-color: #fff;
}
评论0