IE CSS对齐问题

我有以下的CSS，我已经“黑客”用PHP，因为它不能在IE7正确对齐。有没有更好的方式来做到这一点，而不诉诸于PHP？IE CSS对齐问题

#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文件。

来源

2009-02-10 lYriCAlsSH

你想避免条件或多个CSS文件，但混合PHP到你的CSS？这有点落后。如果将CSS移动到外部文件，该怎么办？在这种情况下你不能使用php。 – patricksweeney 2009-02-10 04:57:23

该CSS位于名为css.css.php的外部文件中，并且该问题表明他不想使用PHP ...所以我看不出您的评论如何有效。 – UnkwnTech 2009-02-10 04:59:44

哇。是的，不要这样做。你会想要使用“条件注释”来包含你想要的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浏览器的调整，可能会提前计划，用“身体课”的把戏。它看起来有点丑陋，但它是一种成熟的技术，有时它会打败很多样式表和样式标签。

这就是：

 
<!--[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。

来源

2009-02-10 05:08:16

这种方法仍然使用一些有条件的意见，但至少你没有评估通过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]-->

来源

2009-02-10 04:49:16 bendewey

这真的很难说这是怎么回事上没有演示页，但会不会是页面上的其他元素颠簸下来，一个额外的18个像素？可能是因为元素上有一些默认边距？我想不出任何其他问题与您提供的CSS有关。 IE和其他浏览器中的子元素可能会有不同的大小？

来源

2009-02-10 05:09:14

通常当我看到Dev的做这样的事情，那是因为他们不明白是怎么回事。然后他们最终得到3个基本相同的，大的CSS文件的单独副本;和很多头痛。

IE在正确方向上的安全步骤条件注释; especialyl浏览器在您的php示例中嗅探注定会失败，因为用户代理字符串不能保证。

我最好的给你recommandation是花时间通过一次非常无聊的W3C CSS文档阅读，如果只有显示块和内联模式的章节。一旦你读到，你的CSS布局问题的90％将被解决。剩下的就是习惯了最常见的IE6错误，这是一种无用的“布局”模式。

来源

2009-02-12 23:47:56

#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 
}

来源

2012-06-12 21:47:00

IE CSS对齐问题

回答

相关问题