CSS中的条件注释 [英] Conditional Comments within CSS
问题描述
我目前正在为首页开发一个主题，但遇到了一些问题。无论什么原因，我没有访问编辑html代码本身，我需要编写自定义.css IE（具体版本低于IE9）。
我有两问题。第一个是双重背景。 IE9以下的版本似乎无法完美呈现。如果IE跳过元素，这是好的，但由于此元素中的图形与另一个元素（用于平滑的图形转换）协同工作，它使得另一个元素看起来很奇怪。第二个元素中的图形是一个div框内的背景。我想这个背景是另一个自定义背景，只有当用户使用IE浏览器时呈现;如果可能，我希望这只适用于IE9以下的版本（网站用双背景渲染，只是在IE9中很好）。
http://patrikarvidsson.com/project/sohelp/illustration.jpg
CSS如下（#mainframe是标题导航框下的部分）。下面的图像是如何在IE8中呈现。 IE7显示相同。第一个是FF / Chrome / Safari和IE9。
#mainframe {
background：url（'img / bg2 .png'）no-repeat，
url（'img / bg1.png'）repeat-y！important;
}
我在网上搜索了很多，这似乎没有工作没有在HTML标记中编写条件注释。我缺少什么？这是可行的，只有使用.css文件吗？
网站正在使用jquery。我不知道这个东西，但我想我会提及它，以防万一。
转换为这篇文章，说明如何使用有条件评论来设置html元素上的类。
您的html标签应该是这样的：
<！ - [if lt IE 7]> < html class =ie6> <！[endif] - >
<！ - [if IE 7]> < html class =ie7> <！[endif] - >
<！ - [if IE 8]> < html class =ie8> <！[endif] - >
<！ - [if IE 9]> < html class =ie9> <！[endif] - >
<！ - [if（gt IE 9）|！（IE）]><！ - < html class => <！ - <！[endif] - >
编辑2
自从宣布IE10将不支持条件评论我虽然会更好的更新这个答案。我测试了它将支持的评论类型，看起来，上述仍然可以工作，但如果你想定位高于10或只有10你会运气。正如Microsoft自己在他们的博客（在评论中的链接@ MarcoDemaio）中建议的那样，你应该使用特征检测。
然后你可以在css中做这样的操作：
.somestyle {
background：transparent url（'derp.jpg'）no-repeat;
}
/ * ie6 fallback class * /
.ie6 .somestyle {
background：#eee;
}
阅读文章，祝你好运;）
编辑2
由于IE7不是我最大的问题，IE9的行为非常一致只需要下面的代码（这将只添加一个类的IE版本小于IE9）：
< ;! - [if lt IE 9]>< html lang =enclass =lte9><！[endif] - >
<！ - [if gt IE 8 |！IE]>< ;! - >< html lang =en><！ - <！[endif] - >
编辑1
在这种情况下，您只能使用浏览器特定的黑客，我认为他们是脏的如果你没有别的选择...
这样的：
.someclass {
* color：blue; / * IE 7及以下* /
_color：blue; / * IE 6 * /
}
/ * IE6，IE7 - star hack * /
.someclass {* color：blue; }
/ * IE8 - 获胜hack * /
.someclass {color：blue\0 /; } / *必须是选择器规则集中的最后一个声明* /
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 .css for IE (specifically versions below IE9).
I have "two" issues. First one is dual backgrounds. Versions below IE9 can't seem to render them flawlessly. If IE skips the element, this is fine but since the graphic in this element co-works with another element (for a smooth graphical transition), it makes the other element look weird. The graphic in this second element is a background within a div-box. I want this background to be another custom background that's only rendered if the user is using IE as browser; and if possible, I want this to only apply to versions below IE9 (site is rendered with dual backgrounds just fine in IE9).
http://patrikarvidsson.com/project/sohelp/illustration.jpg
CSS is as follows (#mainframe is the part under the header navigation box). The lower image is how it is rendered in IE8. IE7 shows the same. First one is FF/Chrome/Safari and IE9.
#mainframe { background: url('img/bg2.png') no-repeat, url('img/bg1.png') repeat-y !important; }I've searched quite a lot on the net, also been asking friends and this does not seem to be working without writing conditional comments within the html markup. Am I missing something? Is this doable somehow with only the use of .css files?
Site is using jquery. I don't know this stuff, but I thought I'd mention it just in case.
解决方案You might want to look into this article here 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:
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]--> <!--[if IE 7 ]> <html class="ie7"> <![endif]--> <!--[if IE 8 ]> <html class="ie8"> <![endif]--> <!--[if IE 9 ]> <html class="ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->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):
<!--[if lt IE 9]><html lang="en" class="lte9"><![endif]--> <!--[if gt IE 8|!IE]><!--><html lang="en"><!--<![endif]-->Edit 1
Ok I managed to miss your 'cant' 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 - star hack */ .someclass { *color: blue; } /* IE8 - winning hack */ .someclass { color: blue\0/; } /* must be last declaration in the selector's ruleset */
这篇关于CSS中的条件注释的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
