浏览器- CSS新手问题IE vs Chrome

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

有人有什么建议吗?

一种方法是:

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

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

您可以通过向目标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;
}

在HTML级别使用IE的if条件可能是修复IE(通常为< 9)所具有的缺陷的最佳方法。CSS级别不存在条件注释。你也可以(如果你愿意的话)使用CSS修改，但这可能不是最好的解决方案，因为以后版本的IE可能不允许这些修改，但可能仍然有相同的CSS问题。

顺便说一下，出于验证目的，第二个if条件应该写成如下:

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

实现这个逻辑最简单的方法:

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

是使用IE的条件注释写出唯一的正文标签:

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)
你的覆盖样式保持你的好样式，所以更容易维护

相关内容

最新更新

热门标签：