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對齊問題

回答

相關問題