CSS IE兼容性問題

Question

我是一般編程的新手，尤其是CSS。 我目前正在為火車愛好者建立一個新的網站。 我正在從頭開始，這樣我可以在HTML，CSS，PHP，MySQL等方面獲得一些經驗。

無論如何，我遇到了一個問題。 我已經在Google上搜索了一種解決方案，但是找不到。 除了Internet Explorer，我的CSS似乎與市場上的每個Web瀏覽器兼容。 除非您親自檢查，否則我真的不知道如何解釋該問題。 好像我的標題和左側菜單是唯一的樣式元素，但是我的內容和右側菜單被推到右側而不是樣式。 分別在IE和其他瀏覽器中檢查此鏈接 。 您會看到差異。

所以我的問題是：我該如何解決？ 我知道它一定是IE錯誤，因為它可以在其他所有瀏覽器中使用，但我不知道它可能是什么！ 如果我需要發布CSS腳本，請告訴我。 預先感謝您提供的任何幫助！

Answer 1

在樣式表中，您有一個多余的width:100% div元素上為width:100% （塊級元素自然具有填充其容器的寬度）。 IE將此100％解釋為#container 。 您可以通過在styles.css的第119行處刪除以下width:100% （理論上）來糾正IE7中的樣式問題。 我認為IE7如何解釋display:inline-block

但是，我必須警告您，確保與IE 7及更低版本的兼容性是一個巨大的難題，完全不值得。 :)

Answer 2

您正在使用哪個版本的IE進行測試？ 我在Firefox，IE9、8和7上進行了檢查。在IE8和IE9上看起來還不錯。 盡管7上的問題很少，但是您可以在7中使用條件注釋來解決問題。創建專門用於IE7的新css文件，然后在標題中使用類似以下的代碼

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

現在與ie7.css一起玩，直到看起來更好為止。 這種方法的好處是，您可以在IE中解決問題，而不會干擾其他瀏覽器的呈現。 您也可以使用“ ietester”和調試欄來確定到底是什么錯誤。 即時通訊目前無法找到確切的鏈接，但谷歌應該幫助。

您可以在http://www.quirksmode.org/css/condcom.html上閱讀有關條件評論的更多信息。