Question

我有以下用PHP“黑客攻击”的CSS，因为它在IE7中没有正确对齐。有没有更好的方法来做到这一点，而不诉诸PHP？

 #Menu
    {
        width: 100%;
        height: 32px;
        padding-top: <?php if(preg_match('/msie/i', $_SERVER['HTTP_USER_AGENT'])){echo '22px';}else{echo '40px';}?>;
        padding-left: 13px;
    }

我想避免使用条件注释并且必须维护多个css文件。

Answer 1

哇。是的，不要那样做。你会希望看看使用“条件评论”来包含你想要的CSS。您的第一个评论者bendewey已经展示了如何轻松地定位IE7。还有其他类型的条件注释，它们将允许您定位其他版本的IE。

他们是：

<!--[if IE]>
According to the conditional comment this is Internet Explorer
<![endif]-->
<!--[if IE 5]>
According to the conditional comment this is Internet Explorer 5
<![endif]-->
<!--[if IE 5.0]>
According to the conditional comment this is Internet Explorer 5.0
<![endif]-->
<!--[if IE 5.5]>
According to the conditional comment this is Internet Explorer 5.5
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is Internet Explorer 6
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is Internet Explorer 7
<![endif]-->
<!--[if gte IE 5]>
According to the conditional comment this is Internet Explorer 5 and up
<![endif]-->
<!--[if lt IE 6]>
According to the conditional comment this is Internet Explorer lower than 6
<![endif]-->
<!--[if lte IE 5.5]>
According to the conditional comment this is Internet Explorer lower or equal to 5.5
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is Internet Explorer greater than 6
<![endif]-->

如果您计划对不同版本的IE进行大量调整，您可以提前计划并使用“body class”技巧。它在标记中看起来有些丑陋，但它是一种经过验证的技术，有时候会有很多样式表和样式标签。

这是：

<!--[if !IE]>--><body><!--<![endif]-->
<!--[if IE 6]><body class="ie6"><![endif]-->
<!--[if IE 7]><body class="ie7"><![endif]-->
<!--[if IE 8]><body class="ie8"><![endif]-->

在你的样式表中，你只需要通过将类添加到选择器来重置所需的任何样式。像这样：

#some_div {
     margin-top:30px;
}
.ie6 #some_div {
     margin-top:40px;
}
.ie7 #some_div {
     margin-top:50px;
}

希望这是有道理的。无论哪种方式，它都是您想要使用的条件注释而不是PHP。

Answer 2

此方法仍然使用一些条件注释，但至少您不通过PHP评估代码。为了获得更多帮助，我需要查看完整的代码示例。

<style type="text/css">
#Menu    {
    width: 100%;
    height: 32px;
    padding-top: 40px;
    padding-left: 13px;
}
</style>

<!--[if IE]>
<style type="text/css">
#Menu    {
    padding-top: 22px;
}
</style>
<![endif]-->

Answer 3

如果没有演示页面，很难分辨出这里发生了什么，但是可能是页面上的另一个元素是否会额外增加18个像素？可能是元素上有一些默认的保证金吗？我不能想到你给出的CSS有什么问题。在IE和其他浏览器中，子元素的大小可以不同吗？

Answer 4

通常当我看到dev正在做这种事情时，这是因为他们不明白发生了什么。然后他们最终得到3个基本相同的巨大CSS文件的单独副本;还有很多令人头疼的问题。

IE向正确方向安全迈进的条件评论;特别是浏览器在你的php示例中嗅探注定要失败，因为无法保证用户代理字符串。

我最好的建议是花点时间阅读非常枯燥的W3C CSS文档，如果只有关于DISPLAY BLOCK和INLINE模式的章节。一旦你读到它，90％的css布局问题将得到解决。剩下的就是习惯了最常见的IE6错误，这是臭名昭着的“布局”模式。

Answer 5

#some_div {
     _margin-top:40px; //Only works on IE6
     *margin-top:30px; //Only works on IE7-IE6
      margin-top:20px\9; //Only works on IE8-IE7-IE6
      margin-top:10px; //Works on all others
}

IE CSS对齐问题

5 个答案: