藍圖網站完全不同於IE瀏覽器與Firefox/Chrome

我正在使用Blueprint CSS框架來開發我的網站以確保跨瀏覽器的兼容性......除非在IE中看起來完全不同。藍圖網站完全不同於IE瀏覽器與Firefox/Chrome

該網站是http://rtwilson.com/academic-new/，在Firefox和Chrome瀏覽器中看起來不錯，但在IE中完全搞砸了。主體不居中，圖像位於錯誤的地方，文字很奇怪。

有沒有人有任何想法我可以這樣分揀？我想到了Blueprint等人的全部觀點。它是通過跨瀏覽器（特別是IE）兼容性對問題進行分類的。我已經包含了正確的IE風格文件 - 所有其他想法？

來源

2011-12-05 robintw

此頁面處於Quirks模式。添加一個好的'doctype'。儘可能最短的形式是'<！DOCTYPE html>'。 – Michas

藍圖鏈接是罰款（儘管我最近轉而使用Twitter Bootstrap） - 無論網站的複雜程度如何，只要你的標記是正確的，並且類的使用是正確的，它就可以爲你做所有事情。

除了文檔類型（還應該添加 - 如Michas所提及的那樣）之外，一個地方可以將「last」類添加到包含導航欄div的div。你現在寫的方式是，你有一個跨度-24，包含另一個跨度-24，緊接着跨度-15和跨度-9。

您有：

<div class="span-24 last"> 
     <div class="span-24"> 
     ... 
     </div> 
     <div class="span-15"> 
       ... 
     </div> 
     <div class="span-9 last"> 
       ... 
     </div> 
    </div>

您應該有：

<div class="span-24 last"> 
     <div class="span-24 last"> 
     ... 
     </div> 
     <div class="span-15"> 
       ... 
     </div> 
     <div class="span-9 last"> 
       ... 
     </div> 
    </div>

因爲它是現在寫的，我也不會在毫釐驚訝的是IE無法弄清楚，單排不應該有48個跨度。

來源

2011-12-05 13:07:29

我注意到，您已更新您的網站以包含上面提到的「最後」課程。您會注意到，除非您在IE中處於兼容模式，否則它仍會關閉。您應該在標記的頂部至少添加一個最小的，有效的doctype排版，以防止IE陷入怪癖模式。 –

謝謝。我之前添加了doctype，但之後設法用舊版本的文件覆蓋它。哎呀！感謝您指出它仍然不在那裏。 – robintw

如果我是誠實的，我不會用藍圖的CSS - 一個簡單的網站和你我只是簡單地創建一個IE一個單獨的樣式表，像這樣

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

來源

2011-12-05 11:59:07 adamhuxtable

感謝您的回答，雖然這將要求我知道我需要爲IE做不同的事情。我認爲Blueprint的部分原因是它爲你做了這一切？ – robintw

藍圖網站完全不同於IE瀏覽器與Firefox/Chrome

回答

相關問題