！重要的不工作在IE6？ [英] Does !important not works in IE6?

问题描述

！important 在IE6中无效吗？如果我们需要IE6兼容性，那么我们不应该使用！important ？

解决方案

IE6支持！重要的是，！重要的规则是选择器中该属性的最后规则。

这听起来有点混乱，但如果你声明！重要高度，它必须是给定选择器中height的最后一个声明。

这样考虑这些示例：

  #selector {height：100px; height：150px！important; } 
结果：所有浏览器：150px; 
 
 #selector {height：100px; height：150px！important; } 
 td＃selector {height：200px; } 
结果：所有浏览器：150px; 
 
 #selector {height：100px; height：150px; } 
 td＃selector {height：70px; height：200px！important; } 
结果：所有浏览器：200px; 
 
 #selector {height：100px！important; height：150px; } 
结果：所有现代浏览器，但ie6：100px; ie6：150px; 
 
 #selector {height：100px！important; height：150px; } 
 td＃selector {height：200px; } 
结果：所有现代浏览器，但ie6：100px; ie6：200px; 
 
 #selector {height：100px; height：150px; } 
 td＃selector {height：70px！important; height：200px; } 
结果：所有现代浏览器，但ie6：70px; ie6：200px; 
 

什么ie6解析每个选择器的'height'值作为最后一个'height'在选择器（其他规则可能适用，但我相信这是你的标准情况下）。然后，它基于！重要和选择器特定性规则，从所有这些中选择最具体的高度。

其他浏览器会在解析height值时考虑'！important'

一个好处是，每一个其他合理的浏览器将使用你的重要风格，而ie6将选择该选择器中的最后一个规则声明。

你会更好的一个ie6特定的样式表虽然除非只有一个<

精神示例

p>想象一下，选择一个CSS规则是一个问题1）获得所有匹配元素的规则，2）决定使用那些规则。

在每个其他浏览器中，如果你想得到一个元素的height，它就是这样：

1. 对于每个选择器，选择最后一个！重要高度，如果有一个，否则只是最后一个高度。 / li>
   

2. 选择最具体的选择器，其中所选的height为！重要高度，否则为内联样式高度，否则为最具体的选择器。
   

在ie6中，它大约是：

1. 选择最具体的选择器，其中所选的height是！重要高度，否则为内联样式高度，否则是最具体的选择器。

Does !important not works in IE6 ? If we need IE6 compatibility too then shouldn't we use !important?

解决方案

IE6 supports !important when the rule with !important is the last rule for that property within a selector.

This sounds a little confusing, but if you declare an !important height, it must be the last declaration for 'height' within a given selector.

As such consider these examples:

#selector { height: 100px; height: 150px !important; }
Result: All browsers: 150px;

#selector { height: 100px; height: 150px !important; }
td#selector { height: 200px; }
Result: All browsers: 150px;

#selector { height: 100px; height: 150px; }
td#selector { height: 70px; height: 200px !important; }
Result: All browsers: 200px;

#selector { height: 100px !important; height: 150px; }
Result: All modern browsers but ie6: 100px; ie6: 150px;

#selector { height: 100px !important; height: 150px; }
td#selector { height: 200px; }
Result: All modern browsers but ie6: 100px; ie6: 200px;

#selector { height: 100px; height: 150px; }
td#selector { height: 70px !important; height: 200px; }
Result: All modern browsers but ie6: 70px; ie6: 200px;

What ie6 does is parse the 'height' value for each selector as the last 'height' declaration present within the selector (other rules may apply but I believe this is your standard case). Then it selects the most specific 'height' out of all of these based on !important and selector specificity rules. It effectively ignores the 'height' declarations that are not the last within their selector.

Other browsers instead will take into account '!important' when parsing the 'height' value for each selector, before comparing selectors based on !important and specificity rules.

One "benefit" of this is that every other reasonable browser will use your "important" style, while ie6 will pick the last rule declaration within that selector.

You would be much better off with an ie6 specific stylesheet though unless there is only a very small number of ie6 tweaks and you want to css comment each one as an ie6 exploit.

Mental Example

Imagine picking a CSS rule is a matter of 1) getting all the rules that match the element and 2) deciding which of those rules to use. Pretend the inline style tag is just another selector unless I mention otherwise.

In every other browser if you want to get the 'height' for an element it does this approximately:

1. For each selector choose the last !important height if there is one, otherwise just the last height.

2. Pick the most specific selector where the selected 'height' is an !important height, otherwise the inline style height, otherwise the most specific selector.

In ie6 it does this approximately:

1. For each selector choose the last height.

2. Pick the most specific selector where the selected 'height' is an !important height, otherwise the inline style height, otherwise the most specific selector.

这篇关于！重要的不工作在IE6？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！