首页 > 代码库 > 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">&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"就可以了

CSS常见问题以及IE的兼容性