Conditional Comments within CSS

后端未结

关注

 3  1076

I am currently developing a theme for a homepage but ran into a few problems. For whatever reason I have no access to editing the html code itself, and I need to write custom .c

相关标签:

3条回答

一整个雨季

2021-02-10 03:56

I had this problem in my CMS application so...

Create a container div have it's class the browser name and version to be looks like

<div class="ie_6_0">

<div class="your_custom_elements">
 ///////
</div>

</div>

and do you CSS classes like

.your_custom_elements{common styles between versions}
.ie_6_0 .your_custom_elements{do somthink for old versions}
.ie_9_0 .your_custom_elements{do somthink for new versions}

UPDATE 1

or like

<div id="mainframe" class="ie_6_0">
///
</div>

and CSS like

#mainframe{common styles between versions}
#mainframe.ie_6_0{do somthink for old versions}
#mainframe.ie_9_0{do somthink for new versions}

ie_6_0: as your user browser name and version must request it and add it by code.

0 讨论(0)

余生分开走

2021-02-10 03:59
You might want to look into this article which explains how to use conditional comments to set classes on the html element. You can then use that class to target specific browsers in your stylesheet, in a clean way.

Your html tag would look something like this:
```




 <html> 
```
Edit 2

Since the announcement that IE10 will not support conditional comments I though it would be nice to update this answer. I tested the type of comments it will support and it seems that the above will still work, but if you want to target higher than 10 or only 10 you will be out of luck. As suggested by Microsoft themselves on their blog (link in comments @MarcoDemaio) you should use feature detection.

Then you can do something like this in your css:
```
.somestyle {
    background: transparent url('derp.jpg') no-repeat;
}

/* ie6 fallsback class */
.ie6 .somestyle {
    background: #eee; 
}
```
Read the article, and good luck ;)

Edit 2:

Since IE7 isn't my greatest concern anymore and IE9 is pretty consistent in its behaviour I can get away wil just the following code (which will add a class only for IE versions less than IE9):
```

<html>
```
Edit 1:

Ok I managed to miss your "can't edit html" comment.

In that case you can only use browser specific hacks, I think they're dirty as hell but hey, if you have no other option......

Somthing like this:
```
.someclass {
    *color: blue; /* IE 7 and below */
    _color: blue; /* IE 6 */
}

/* IE6, IE7 - asterisk hack */
.someclass  { *color: blue; }

/* IE8 - winning hack */
.someclass  { color: blue\0/; } /* must be last declaration in the selector's ruleset */
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
一生所求

2021-02-10 04:00
For your dual backgrounds problem, you simply need to add another containing element.
```
<div class="element">
...
</div>
```
becomes
```
<div class="container">
    <div class="element">
    ...
    </div>
</div>
```
I'm not sure why you wouldn't be able to manually edit the HTML, but if you have access to a javascript file and you're using jQuery, you can add the class like so:
```
$('.element').wrap('<div class="container" />');
```
You can use CSS hacks to avoid using conditional comments. CSS hacks aren't as commonly used now since the average user uses a browser that doesn't require any hacks to display properly, but it is still a completely valid and reliable way to avoid using HTML conditional statements. Depending on the specificity you want, you have a bunch of different hacks that you can use to only target specific versions of IE:
```
* html .element { color: #fff; /* IE6 only */ }
html .element { _color: #333; /* IE7 only */
*+html .element { color: #999; /* IE7 only */ }
html .element { *color: #000; /* IE7 and below */
html .element { color: #ccc\9; /* IE8 and below */ }
```
So:
```
#container { background: url(img/bg1.png) repeat-y\9; }
#container #mainframe { 
    background: url('img/bg2.png') no-repeat, url('img/bg1.png') repeat-y !important;
    background: url('img/bg2.png') no-repeat\9; }
```
0 讨论(0)
发布评论:

提交评论
- 加载中...