CSS 中的条件注释

发布于 2024-12-07 15:05:36 字数 828 浏览 1 评论 0原文

我目前正在为主页开发一个主题，但遇到了一些问题。无论出于何种原因，我都无法编辑 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。我不知道这些东西，但我想我应该提一下以防万一。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

錯遇了你 2024-12-14 15:05:36

您可能需要查看这篇文章解释如何使用条件注释在 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 */

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:

<!--[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]-->

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 class="lte9"><![endif]-->
<!--[if gt IE 8|!IE]><!--><html><!--<![endif]-->

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 原文

述情 2024-12-14 15:05:36

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

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

变成

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

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

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

你可以使用 CSS hacks 来避免使用条件注释。 CSS 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; }

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 原文

百善笑为先 2024-12-14 15:05:36

我在我的 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}

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

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 文章

0 评论

24 人气

关注发私信

友情链接

文江博客

CSS 中的条件注释

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

CSS 中的条件注释

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。