Question

我目前正在为主页开发主题，但遇到了一些问题。无论出于何种原因，我无法编辑html代码本身，我需要为IE编写自定义.css（特别是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。我不知道这些东西，但我想我会提到它以防万一。

Answer 1

您可能需要查看this article，其中介绍了如何使用条件注释在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> <!--<![endif]-->

修改2

自从宣布IE10不支持条件评论后，我会更新这个答案。我测试了它将支持的评论类型，看起来上面仍然有用，但如果你想要高于10或只有10你将失去运气。正如微软自己在他们的博客上所建议的那样（链接在评论@MarcoDemaio中），您应该使用特征检测。

然后你可以在你的css中做这样的事情：

.somestyle {
    background: transparent url('derp.jpg') no-repeat;
}

/* ie6 fallsback class */
.ie6 .somestyle {
    background: #eee; 
}

阅读文章，祝你好运;）

编辑2：

由于IE7不再是我最关心的问题了，而且IE9的行为非常一致，我只能使用以下代码（仅为IE版本低于IE9添加类）：

<!--[if lt IE 9]><html class="lte9"><![endif]-->
<!--[if gt IE 8|!IE]><!--><html><!--<![endif]-->

修改1：

好的，我设法错过了你的“无法编辑HTML”评论。

在这种情况下，你只能使用浏览器特定的黑客攻击，我认为它们很脏，但是嘿，如果你没有别的选择......

像这样：

.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 */

Answer 2

我在CMS应用程序中遇到此问题所以......

创建一个容器div让它的类浏览器名称和版本看起来像

<div class="ie_6_0">

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

</div>

你是否像

这样的CSS类

.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}

更新1

或喜欢

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

和CSS一样

#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：因为您的用户浏览器名称和版本必须请求并按代码添加。

Answer 3

对于双重背景问题，您只需添加另一个包含元素。

<div class="element">
...
</div>

变为

<div class="container">
    <div class="element">
    ...
    </div>
</div>

我不确定为什么你不能手动编辑HTML，但是如果你有权访问javascript文件而你正在使用jQuery，你可以像这样添加类：

$('.element').wrap('<div class="container" />');

你可以使用CSS黑客来避免使用条件评论。 CSS hacks现在不常用，因为average user使用的浏览器不需要任何hack才能正常显示，但它仍然是一种完全有效且可靠的方法来避免使用HTML条件语句。根据您想要的特异性，您可以使用一堆不同的黑客来定位特定版本的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 */ }

所以：

#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; }

CSS中的条件注释

3 个答案: