CSS浏览器兼容解析

一、使用!important

其功能是兼容IE6和Firefox浏览器，被!important声明后具有较高的优先权，IE6不支持!important，Firefox支持它。

具体使用时将优先属性放在最近位置，然后使用!important来声明该属性。

例如：

.mm{

       width:400px;

       height:80px;

       background:#9900FF   !important;

       color:#FFFF;

       background:#333;

}

 

二、水平居中问题

IE6可以使用text-align:center;属性实现水平居中，而firefox浏览器不支持这个属性，所以解决的方法是：设置子元素的margin属性的左右边界值。

例如:

    margin:0 auto;

 

三、解决非浮动内容和容器的问题

在IE6当容器内容增加时容器高度也会自动增加，但是在firefox浏览器中内容会在容器之外，容器不会变化

解决方法：

  例如：

   .mm｛

           min-height:50px;

           height:auto !important;

          height:50px;

          ......... ....... ....... ....... .......

    }

 

四、浮动元素背景层的高度不兼容现象。

IE6中当定了浮动元素高度后，背景层高度会自动适应子浮动元素的高度，而firefox背景层高度不会发生任何变化

解决方法，使用:after伪类

.mm{

      ......  .......

      ......  ........

}

.nn {

     ...... ........

     ...... ........

}

.mm:after{

    content:".";

    height:0;

    display:block;

    clear:both;

    visibility:hidden;

}

五、并列浮动元素不兼容

当两个浮动元素并列放置时，其中一个浮动元素没有定义，那么在IE6和firefox显示不一致。

解决方法：正确设置两个浮动元素的宽度值。

六、嵌套元素叠加问题

当嵌套的元素父、子设置宽度和高度时均会发生不同的叠加不兼容现象

解决方法：

1、margin值分隔

子元素定义margin值，父元素定义边框属性。

2、padding值分隔

父元素定义padding值，子元素不能定义padding.

 

浮动元素双边距问题

   当浮动元素产生时。IE6的第一个浮动元素产生双倍边距。

解决方法：

   定义第一个浮动元素采用内联元素方法。display:inline;

浮动元素零边距问题

IE6忽略了浮动元素下边界，浮动元素设置的maigin:20px时下边界不会产生作用

解决办法：

加入<div class="clear"></div>

.clear{

   clear:both;

   height:0;

   font-size:1px;

}

 

浮动列表问题

当UL下的LI设置为浮动时，UL的背景无法显示。

设置办法就是设置UL的高度height的值；

 

图片空隙问题

当设置图片样式后图片与背景出现空隙。

解决办法：

html方面： 正确书写标签

<div>

<img src="aaa.jpg"></div>     这个</div>要直接写在图片标签后面

或者设置属性display:block;

img{

  display:block;

}

 

*html 的使用

*html定义的属性只有IE6认可

垂直居中问题：

  用line-height设置为当前高度，在通过vertical-align:middle

设置标签<a>中的样式，设置display:block;

使用UL标签时首先设置list-style和padding,这两个属性在不同浏览器默认设置不一致;

外部<div>不要固定高度，最好加上overflow:hidden以实现高度自适应；

手型光标cursor:pointer中的hand只适用于IE；