css解决ie和firefox的兼容问题

两大浏览器主要的兼容问题在于内边距和外边距的呈现结果不一养，firefox的宽度或者高度是实际宽度或者高度+边距的和；而IE则是不管边距的，IE的块原来是多宽或多高，加上边距之后还是那么多的宽高。

解决办法是使用!important声明或者用hack方法，如下：

一、用!important声明

1. padding-top:5px;

2. height:10px !important;

3. height:15px;

以上定义了两个height, 其中一个后面加了!important , IE将会忽略这个属性,而使用后面的height:15px; 而Firefox却不会忽略这个属性, 直接使用height:10px。

二、用hack方法

将*号、>号、~号……等等特殊符号，推荐使用星号即*号，加在某个样式前面，IE的识别能力较ff为强，加了这些符号ie仍然认为是可用的样式格式，而ff就会跳过。

代码:

<style>

div{

background:green;

*background:red;

}

</style>

<div>我在IE6中看到是红色的，在firefox中看到是绿色的。</div>

<style> div{ background:green;*background:red; }</style>

<div>我在IE6中看到是红色的，在firefox中看到是绿色的。</div>

解释一下：

上面的css在firefox中，它是认识不了后面的那个带星号*的东东是什么的，于是将它过滤掉，不予理睬，解析得到的结果是:div{background:green},于是理所当然这个div的背景是绿色的。