html - CSS 条件注释不起作用

标签 html css conditional-statements

我有一个 div 在 Chrome、IE 和 FF 中没有正确排列。 Chrome 需要 padding-left:40px;而 IE 和 FF 则没有。我一直在玩 if 几个小时,我知道我错过了一些简单的东西。 这是我一直在尝试的:

<!--[if !IE]>-->
<link href="non-ie.css" rel="stylesheet" type="text/css">
<!--<![endif]-->

我也试过普通的 style.css:

<!--[if !IE]--> 
#lower .expo {padding-left:40px;}
<!-- <![endif]-->

或者 #lower .expo {宽度:400px;填充顶部:40px;向左飘浮;}

我也试过这个:

#lower .expo {width:400px; padding-left:40px; padding-top:40px; float:left;}
<!--[if gt IE 6]> 
#lower .expo {width:400px; padding-top:40px; float:left;}
<!-- <![endif]-->

有趣的是,如果我这样做:

<!--[if gt IE 6]> 
#lower .expo {width:400px; padding-top:40px; float:left;}
<![endif]-->
#lower .expo {width:400px; padding-left:40px; padding-top:40px; float:left;}

IE 显示正确但 FF 或 Chrome 不显示。这让我疯狂。我一定是遗漏了一些简单的东西,但我已经看得太久了。

最佳答案

只是为了您的实际错误,它在于您如何进行评论。应该是:

<!--[if !IE]><!-->
<link href="non-ie.css" rel="stylesheet" type="text/css">
<!--<![endif]-->

为了更好的方法,这是我使用的方法:

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="ie6"    lang="en"><![endif]-->
<!--[if IE 7]>    <html class="ie7"    lang="en"><![endif]-->
<!--[if IE 8]>    <html class="ie8"    lang="en"><![endif]-->
<!--[if IE 9]>    <html class="ie9"    lang="en"><![endif]-->
<!--[if IE 10]>   <html class="ie10"   lang="en"><![endif]-->
<!--[if !IE]><!--><html class="non-ie" lang="en"><!--<![endif]-->

这样做的好处是您可以保持只使用 1 个样式表的最佳做法。您只需在您的目标前面加上您想要破解的相应 IE 类。

例如:.ie6 #target-id


如需更深入的解释,请查看 Paul Irish's文章:

Conditional stylesheets vs CSS hacks? Answer: Neither!

更新:

2012.01.17: Here is the current iteration that we have in the HTML5 Boilerplate. We actually tried to reduce it down to just a single .oldIE class for IE ≤8 (to use with safe css hacks), but that didn’t fly. Anyway, our current version..

<!--[if lt IE 7]><html class="lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class=""><!--<![endif]-->

关于html - CSS 条件注释不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10334068/

相关文章:

html - 显示图片重叠的css元素

java - 除非我两次请求相同的输入,否则为什么会出现错误? ( java )

javascript - 如果在下拉列表中选择了某个字段,如何只运行 JQuery 函数

r - 如何使用 data.table 根据条件计算列总和?

javascript - 创建具有通用 ID 的按钮列表,以便使用 getElementById 获取其中的任何一个。 (动态ID)

javascript - 带有 JavaScript 和构造函数的动态变量名称 : cloning an image with EaselJS dynamically to multiple canvases

html - 使用vertical-align将按钮在div内垂直居中

html - 网站上的动画背景

html - 悬停时CSS从另一个div更改图像

javascript - CSS 在 DevExtreme 中切换子菜单