5

我目前正在为主页开发主题，但遇到了一些问题。无论出于何种原因，我都无法编辑 html 代码本身，我需要为 IE（特别是 IE9 以下的版本）编写自定义 .css。

我有“两个”问题。第一个是双重背景。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。我不知道这些东西，但我想我会提到它以防万一。

4

3 回答 3

9

您可能想查看这篇文章，它解释了如何使用条件注释在 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 的行为非常一致，我可以只使用以下代码（它只会为低于 IE9 的 IE 版本添加一个类）：

<!--[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 */
于 2011-10-02T11:37:30.987 回答
0

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

于 2011-10-02T10:38:30.640 回答
0

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

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

变成

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

我不知道为什么你不能手动编辑 HTML，但是如果你可以访问一个 javascript 文件并且你正在使用 jQuery，你可以像这样添加这个类：

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

您可以使用 CSS hack 来避免使用条件注释。CSS hack 现在并不常用，因为普通用户使用的浏览器不需要任何 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; }
于 2011-10-02T10:42:39.510 回答