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代码
<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，那只会离标准越来越远！
找了些资料来看得知有一些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，那只会离标准越来越远！
