IE中DIV的OverFlow和 CSSbug来兼容浏览器

今天在IE中写了一个

<DIV  style='overflow:auto;'>

</Div>

然后给里面加了n多div 每个div都有height OK

<DIV  style='overflow:auto;'>

 <div class='dd'></div>

 <div class='dd'></div>

 <div class='dd'></div>

 <div class='dd'></div>

 <div class='dd'></div>

</Div>

该DIV出现了竖直滚动条，但是删除了里面div的class dd 中的height属性值后 就怎么也看不见竖直滚动条了,FF正常)，后来又把height属性添加上了，IE里面出现滚动条了，郁闷至极 （赶紧记下）

 这种情况应该是要overflow出现竖直滚动条，IE里面必须有能展示其高度的盒子内容，如果盒子内容高度不定，则永远不出现竖直滚动条（个人结论）

如何解决这种问题呢：请看正文(转)

CSS中利用bug写IE only FF only的CSS代码

许多年前我就得知在mozilla firefox和IE中的BOX模型解释不一致导致相差BOX相差2px.

找了些资料来看得知有一些CSS写法（HACK）可以做到两个浏览器统一显示。

诸如 !important   /**/ 此类的东西

更有甚者 用 > 这样的符号来让浏览器识别适合自己的CSS定义语句。

看了之后总是似懂非懂的。 在具体运用中却总是卡壳。

在一次菜单的 严格定位中，终于碰到了无法忽略的兼容问题。

再反复调试之后终于大彻大悟了。此刻写出心得给大家共享。

好让还在云雾中的兄弟得道成仙。

今天我们只讨论 BOX 模型解决问题。什么那位同学没带笔记本？蹲墙角唱国歌去！

具体实例我就懒得示范了。

如果你没有碰到无法忽略的问题相必你也不会焦头烂额。

在此重点说明如何做到 每个浏览器 识别适合自己的属性定义语句。

看这个。

#head {

    width: 76px;

}

问#head是什么意思的同学到后边罚站1小时。

这里我们定义了一个 叫head的容器（DIV） 它的宽度是 90px。

好了 至于某某浏览器显示多少 又加了 什么边框 还是减了吖的填充我们不去讨论。

我只说 如何让IE 认为它宽70px而Firefox认为它宽100px。

问为什么的同学到后边罚站2小时。

在实际的工作 不同浏览器的CSS兼容问题 归根结底 是让它们读CSS时 只看到属于自己的属性定义。

不同意的同学请自动退学。

也就是我们上边说的 让IE 认为它宽70px而Firefox认为它宽100px。

我们大概知道了3种方法。

1. !important  

2. /**/

3. >

至于 IE5.0/IE5.5/IE6.0 的区别方法 后边在说

先说 1. !important  , 这个东西 相信所有关心这篇文章的同学都不会陌生它应该是CSSer最熟悉的hack了吧？

我知道它的时候是1998 到了2006 的时候 还是不知道究竟该怎么使用它

因为我曾经在自己写的CSS中使用!important 试图区别IE和Firefox 但是总是无法生效 要么是都不认识 要么是都认识.  在2008的某一天 我突然找到了问题所在

空格 我以前写的!important时候 忽略了它的前边有一个空格的存在。

也即使说在一个属性的后面打一个‘空格’然后紧跟!important  这样写之后 IE 和 Firefox就分道扬镳了。

什么？讥笑本人用词不当的同学请出列 罚站5小时

其实1 2 项方法的关键都在于它们前边要紧贴一个空格。否则 是无效的。

所以说 如果我们这样来写

#head {

    width: 100px !important;

    width: 70px;

}

IE 说 它是70px 因为IE 不认识‘!important（提升优先权）’发现了重复定义width时候就按最后一个来显示

Firefox说 它是100px 因为Firefox认识‘!important’根本不甩后边那句。

方法2是这么写的

#head {

    width: 100px;

    width /**/: 70px;

}

IE 认为它宽100px 因为它会把有/**/的那一行属性定义给注释掉。

而Firefox 则认为它宽70px 因Firefox只注释/**/之间的东西而不是整行属性都作废都注释掉（个人是这么理解的）

注意它们之前必须的哪个空格。

方法3就 比较容易理解和使用了。

这个大于号 只有IE 大爷才能认识 真是佩服IE的强悍 连大于小于号都能解析。其他浏览器就没这么牛了。

方法3 写法如下

#head {

    width: 100px;

    >width: 70px;

}

IE 宽度70px

Firefox 宽度100px

注意！这里顺序很重要。

width: 100px;

>width: 70px;

在IE看来 70px的优先权利大于100px

而Firefox 则不知道‘>width’是什么意思。它会忽略>width: 70px;这行 认定100px

请严重注意！如果你将两个顺序颠倒

>width: 70px;

width: 100px;

两个浏览器 会同时认为容器宽度是100 px

因为 IE 认为‘>width; 70px ’优先它前边定义的宽度 而紧跟着的‘width: 100px;’ 则会是当作重复定义width 按后来‘width; 100px’的为准

Firefox 则根本不知道‘>width; 70px’的含义 直接按 ‘width; 100px ’来解析。

三种方法的具体使用和注意事项都交代完了。

同学们自己练习下。

问那有Firefox下载的哪个同学拖出去斩了！

接下来让我们学习 如果 区分 IE5.0/IE5.5/IE6.0

请看幻灯片：

大家都知道用!important声明可以提升指定样式规则的应用优先权，如下面的例子：

E1{

background-color: red !important;/*提升优先权*/

background-color: blue;

}

但这样写在IE中会有个问题，看过我的《关于CSS样式表优先级》和《关于CSS样式表优先级补遗》，你会知道在IE6和FF中用! important声明可以提高优先级别，但在IE6中的!important声明并不是绝对的，它会被之后的同名属性定义所替换。也就是说在上面的例子中，IE6所应用的是最后一个背景色的值，即“blue”；而在FF中背景色的值为“red”。根据这一点，我们就可以把FF和IE的样式分离开。

OK ，解决了FF和IE的问题，现在来解决IE自己的问题。

看过了嘟嘟的《绕过IE6支持IE5的别一种写法-IE也支持">"》后有感而发，使用“＞”IE是否真的可以认得？我们来看个例子：

E1{

background-color: red;

＞background-color: blue;

}

在FF中得到的是背景色红色，而在IE中得到的背景色是蓝色，根据样式重定义的规则，如果浏览器可以识别“＞”，则应该得到的蓝色的背景，因此可以知道“＞”只有IE可以识别，这点是很重要的哦！在后面大家就会知道了。（注：我测试过其它的一些符号，如“~”、“`”、“＜”等，都只有IE可以识别，在此为了感谢嘟嘟，推荐使用“＞”）

我们再来看个例子：

E1{

＞/*IE only*/background-color: black;

＞/*IE only*/background-color /*IE5.5*/: green;

}

这个例子在IE6中得到了黑色的背景；而在IE5.5中得到的绿色的背景；在IE5中也得到了黑色的背景。这就说明了第二句定义只有IE5.5能识别，这是个很早就公布的HACK，可以在网上找到相关的资料，要注意的就是在属性名之后是有一个空格的。到此我们已经把FF、IE5.5、IE6分离出来了，那IE5呢？其实现在我们只要把IE5跟IE6分开就OK了，来看看例子：

E1{

＞/*IE only*/background-color: red;/*IE5*/

}

E1/*IE5.5+*/{

＞/*IE only*/background-color: black;

}

这里我们又用到一个HACK，就是“E1/**/{}”，这个定义在IE5以上的版本才能识别出来。这个例子得到的结果是，在IE5中的背景色为红色；在IE5以上版本中得到的是黑色背景。

终于把不同版本的浏览器都分离出来了，这样我们就可以为不同的浏览器定义不同的样式了。来看个完整的例子：

E1{

width: 500px;

height: 50px;

background-color: red !important;/*FF*/

background-color: blue;/*IE5*/

text-align:center;

}

E1/*IE5.5+*/{

＞/*IE only*/background-color: black;/*IE6*/

＞/*IE only*/background-color /*IE5.5*/: green;

}

需要注意的是，在上面例子中“background-color”定义的顺利不能改变，即FF-IE5-IE6-IE5.5。对于IE的定义在属性前要加“＞”，因为“E1/**/{}”这个HACK在FF中可以识别。也许你会想，上面的例子不是可以写成：

E1{

width: 500px;

height: 50px;

background-color: red;/*FF*/

＞background-color: blue;/*IE5*/

text-align:center;

}

E1/*IE5.5+*/{

＞/*IE only*/background-color: black;/*IE6*/

＞/*IE only*/background-color /*IE5.5*/: green;

}

这样不就又可以省下几个字节？是没错，可是HACK不是标准，如果滥用HACK，那只会离标准越来越远！