首页 > 代码库 > CSS常见问题以及IE的兼容性
CSS常见问题以及IE的兼容性
作为一名前端，我们通常要做的就是让页面在各系统浏览器上良好显示。当然，还有性能问题。不过，今天要说的是样式的兼容问题。在IE/Mozilla/Webkit/Opera四分天下的今天，IE6-9/Mozilla（Gecko）系列/Chrome/Safari/Opera etc. 这些浏览器的兼容，无不让前端们头痛。而在这之中，最让人头痛的当数IE，特别是IE6。搞定了IE6，基本也就能称霸半个江山了。搞定了IE，也相当于占领了7、80%的领地。不过我想对国内用户说的是，珍爱生命，远离IE，不是黑微软哈，但是在国内这个大环境下，国内的前端工程师何时才能愉快的解决这些奇葩的版本呢？
1、IE6双倍边距bug
假如为一个div设置css：
float:left;
margin-left:10px;
在IE7,Firefox等浏览器下能正确解释左边距10px。但是在IE6下会理解为左边距20px。也就是说，在与浮动同方向的空白边会加倍，解决方法是为这个div的css中添加：display:inline;这样就可避免双倍边距bug。
2、像素问题及解决办法
当使用float浮动容器后，在IE6下会产生3px的空隙，因为是确切的3px，所以，用“暴力破解”吧，比如.left _margin-right:-3px;，还有一种方法是也设置float
例：样式：
1 .left{width:100px;height:100px;background:#096;float:left;}
2
3 .right{width:200px;height:100px;background:#39F;}
HTML：
<divclass="left">在ie6下的显示状态</div>
<divclass="right">在ie6下的显示状态</div></p><p><p>在ie6浏览状态下，我们看到。绿色div与蓝色div中间出现了一条空隙。这就是ie6下3像素bug问题。</p></body>
结果：
3、当子元素浮动且未知高度时，怎么使父容器适应子元素的高度？
这种情况可在父窗口加上overflow:auto;_zoom:1;这两个样式属性，overflow:auto;是让父容器来自适应内部容器的高度，
_zoom:1;是为了兼容 IE6而使用的CSS HACK。
4、IE6中奇数宽高的BUG
IE6还有奇数宽高的bug，解决方案就是将外部相对定位的div宽度改成偶数。
5、IE6下为什么图片下方有空隙产生
解决这个BUG的方法也有很多，可以是改变html的排版，或者定义img 为display:block
或者定义vertical-align属性值为vertical-align:top| bottom |middle |text-bottom
还可以设置父容器的字体大小为零，font-size:0
6、ie6下空标签高度问题
一个空div如果高度设置为0到19px，IE6下高度默认始终19PX。
例如：
c{background-color:#f00;height:2px;/*给定任何小于20px的高度 */}
<divclass="c"></div>
如果不让它默认为19PX。而是0PX的话
解决方法有3种：
1.) css里面加上overflow:hidden;
2.) div里面加上注释,
<divclass="c"><!– –></div>
3.) css里面加上line-height:0;然后div里面加上#nbsp;,
<divclass="c"> </div>(#换成&)
下面呢是CSS的常见问题
1.页面内容居中
body{
margin:0 auto;
}
2.单行文字图标居中
div {
height:25px;
line-height:25px;
}
也就是给height和line-height同样的高度，再用margin-bottom来细调。
3.当网页字体小于12px时 chrome内核浏览器始终显示为12px
body{
-webkit-text-size-adjust:none; *for chorme*
}
4.ie6双倍margin的bug
#box{
float:left;
width:100px;
margin:0 0 0 100px; ie6会产生200px的距离
display:inline; 解决办法
}
5. 多个class合并书写
通常class里面只写一个值，事实上可以多个值，用空格隔开即可。
<span class="a b c">< span>
6.给网页换个鼠标指针
cursor:url(‘指针绝对路径‘),auto;
通常这个css写在body和a里
7.input文本框光标居中
不同浏览器对这个理解不同
解决方法是设置input高度与文字高度相等，然后用上下padding填充即可。
8.css sprites用法
.a {
display:inline-block;
height:16px; width:16px;
background:url(icon.png) x坐标 y坐标 no-repeat;
}
网页中可以使用<span class="a">< span>来显示，当然，方法还有好多。
9.子容器增长时父容器不自动增长
给父容器定义样式
overflow:auto;
zoom:1; 兼容IE6
10.IE6 IE7下li高度异常
IE6 IE7将字体高度也算入行高 导致li高度异常 只需给li定义以下样式即可
font-size:0px;
11.DIV水平垂直居中
<div id="1990c">< div>
#1990c{
width:600px;
height:400px;
position:absolute; 设置绝对定位
top:50%; 距离顶部50%
left:50%; 距离左侧50%
margin-top:-200px; 向上移动div高度的一半
margin-left:-300px; 向左移动div宽度的一半
}
12.子容器margin-top后父容器下移
<div id="head">
<div id="logo">
< div>
< div>
#logo{
margin-top:10px;
} 实际效果:head下移10px
解决办法:给head定义样式overflow:hidden;
13、input、图片水平对齐
vertical-align: middle; // 100%
14、按钮在IE67下的黑边框问题
把input的type="submit"改成type="button"就可以了
CSS常见问题以及IE的兼容性