arv*_*dsn 4 html css internet-explorer conditional-comments
我目前正在为主页开发主题,但遇到了一些问题.无论出于何种原因,我无法编辑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.我不知道这些东西,但我想我会提到它以防万一.
您可能希望查看本文,该文章解释了如何使用条件注释在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 */
| 归档时间： |
|
| 查看次数： |
3596 次 |
| 最近记录： |