CSS 新手问题 IE vs. Chrome答案

【问题标题】：CSS newbie question IE vs. ChromeCSS 新手问题 IE vs. Chrome
【发布时间】：2011-04-20 21:05:02
【问题描述】：

我有一个包含 10 个选择器定义的样式表。当我在 IE 和 Chrome 中查看我的网站时（我不包括 FF，因为它的呈现方式与在 Chrome 中的完全一样），十个选择器定义中有九个在所有浏览器中都可以一致地工作。

不起作用的定义是这样的：

a.dp-choose-date 
{
    /* border: 1px solid red; */
    float: right;
    width: 25px;
    height: 25px;
    padding-top: 5px;
    padding-left: 16px;
    position: relative;                  /* This is only needed for IE */
    top: -25px;                          /* This is only needed for IE */
    margin: 0px;
    display: block;
    text-indent: -2000px;
    overflow: hidden;
    background: url(../images/calendar3.png) no-repeat; 
}

如您所见，IE 只需要两个值。所以我对条件CSS做了一些研究。我现在已经使用了我的样式表，并使用 IE 的两个附加条目创建了一个副本。

在我的文档顶部，我现在有以下内容：

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

<![if !IE]>
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<![endif]>

哪个有效，但我不能在选择器级别执行条件语句吗？

我也在 CSS 文档中尝试过，但也没有用。

[if IE] a.dp-choose-date {
    /* definitions here */
}

有人有什么建议吗？

【问题讨论】：

我很确定 IE if 条件在 CSS 中不起作用。

标签： css internet-explorer conditional-comments

【解决方案1】：

一种方法是：

<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<!--[if IE]> <link href="Styles/custom.css" rel="stylesheet" type="text/css" />

请注意，我在第一个样式表周围没有条件。

在第二个样式表中，只需将标签定义为：

a.dp-choose-date   {
    position: relative; /* This is only needed for IE */
    top: -25px;   /* This is only needed for IE */
}

由于样式表的工作方式，浏览器将结合并应用这两个定义。

【讨论】：

这就是我要找的。谢谢。

【解决方案2】：

您可以通过向目标 IE 添加类来让事情变得更轻松，一个很好的方法是将您的开始 html 标记包装在这样的条件中：

<!--[if lt IE 7]><html lang="en" class="ie6"><![endif]--> 
<!--[if IE 7]><html lang="en" class="ie7"><![endif]--> 
<!--[if IE 8]><html lang="en" class="ie8"><![endif]--> 
<!--[if !IE]><!--><html lang="en"><!--<![endif]-->

这允许您在仅 IE 选择器前加上您要定位的 IE 版本：

a.dp-choose-date 
{
    /* border: 1px solid red; */
    float: right;
    width: 25px;
    height: 25px;
    padding-top: 5px;
    padding-left: 16px;
    margin: 0px;
    display: block;
    text-indent: -2000px;
    overflow: hidden;
    background: url(../images/calendar3.png) no-repeat; 
}

.ie6 a.dp-choose-date 
{
    position: relative;
    top: -25px;
}

【讨论】：

【解决方案3】：

在 HTML 级别使用 IE 的 if 条件可能是修复 IE（通常 CSS hacks，但这可能不是最好的解决方案，因为更高版本的 IE 可能不一定允许这些 hack，但可能仍然存在相同的 CSS 问题。

顺便说一句，您的第二个if 条件应写为以下用于验证目的：

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

【讨论】：

【解决方案4】：

实现此逻辑的最简单方法：

[if IE] a.dp-choose-date {
 /* definitions here */
}

就是用IE的条件cmets写出唯一的body标签：

http://www.positioniseverything.net/articles/cc-plus.html

所以你可以得到这样的结果：

<body class="ie7">

然后，在您的 CSS 中，当您需要覆盖一种样式时，您可以这样做：

.myStyle {--style for good browsers--}
.ie7 .myStyle {over-ride for IE7}

这样做的好处：

只需要加载一个 CSS 文件（保存服务器请求）
您的 CSS 仍然有效（没有丑陋的 CSS hack）
您的覆盖样式与您的好样式保持一致，因此更容易维护

【讨论】：