开发者

Conditional CSS file doesn't override regular CSS

开发者 https://www.devze.com 2023-01-01 21:13 出处:网络
I am using conditional comments to link to a css开发者_C百科 file (let\'s call it \"IEonly.css\") if the IE version is less than 8. I am trying to override some properties in the regular css file. Str

I am using conditional comments to link to a css开发者_C百科 file (let's call it "IEonly.css") if the IE version is less than 8. I am trying to override some properties in the regular css file. Strangely enough, IEonly.css will set new css properties correctly, but it won't override the properties in the regular CSS file!

(I am trying to make this work for IE7).

Help!

EDIT: I added an !important after the css style to see if it would help. It didn't.


Given multiple stylesheets (even if some are hidden from other browsers with conditional comments) then the normal rules of the cascade will apply.

Make sure your selectors are suitably specific, and that you apply the stylesheets in the right order.


If you are using the same selectors in both stylesheets then you should be fine as long as you place the conditional IE stylesheet after the regular stylesheet. If you do that and your IE sheet isn't taking then you might need to write more specific selectors.

#sidebar #nav li a { }

instead of...

#nav li a { }

or

li a { }


Don't forget that you can also use the !important rule to override CSS definitions. Here is the W3C documentation on that rule.


Perhaps you can reorganize the stylesheets to default to IE styles and use an if !IE conditional for "good browser" overrides.


Based on my own experience of similar problems I would guess that there are some bad or missing character lurking somewhere in your IEonly.css file. They can be a real pain to track down, so do the following:

  1. Temporarily remove all CSS from IEonly.css, except for the part that you will use to override the normal CSS. Test to see if this works. If it does, continue to paste the code back into the file, in sections as you see fit. Hopefully you'll find the problem.
  2. If your override did not work when only that part of the code existed in the file, make sure that you have the correct selectors and that the specificity is OK.

You can also try reading http://www.w3.org/TR/CSS2/cascade.html#important-rules for more information.

Can you publish some code for us to look at? That would help.


I added a class to the element and referenced it on the IEonly stylesheet with the class selector and the regular style sheet without. This caused the IEonly style declaration to override the regular one.

0

精彩评论

暂无评论...
验证码 换一张
取 消