所以说 如果我们这样来写
#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 ’来解析。