2

我有一个包含 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 */
}

有没有人有什么建议？

4

4 回答 4

3

一种方法是：

<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 */
}

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

于 2011-04-20T21:31:42.810 回答
1

您可以通过向目标 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 only 选择器添加前缀：

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;
}
于 2011-04-20T21:18:34.747 回答
0

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

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

就是利用IE的条件注释写出唯一的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）
  • 您的超载风格与您的好风格保持一致，因此更容易维护
于 2011-04-20T21:20:25.503 回答
0

在 HTML 级别使用 IE 的if条件可能是修复 IE（通常 < 9）所具有的扭结的最佳方法。CSS 级别不存在条件注释。您也可以（如果您愿意）使用CSS hacks，但这可能不是最好的解决方案，因为更高版本的 IE 可能不一定允许这些 hack，但可能仍然存在相同的 CSS 问题。

顺便说一句，if出于验证目的，您的第二个条件应编写如下：

<!--[if !IE]>-->
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<!--<![endif]-->
于 2011-04-20T21:13:21.853 回答