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

例：样式：

HTML：

       <div class="left">在ie6下的显示状态</div>

 <div class="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的高度 */}

   <div class="c"></div>

   如果不让它默认为19PX。而是0PX的话

解决方法有3种：

  1.) css里面加上overflow:hidden;

  2.) div里面加上注释,

   <div class="c"><!– –></div>

  3.) css里面加上line-height:0;然后div里面加上#nbsp;,

   <div class="c">&nbsp;</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"就可以了