2011-10-12 147 views
2

因此,我們的網站沒有設計文檔類型,我試圖更新它,這樣就不會強制IE進入怪異模式。
問題是,由於開發人員不知道如何使用基於div的設計,因此有幾張表使用了圓角圖像。這在怪癖模式甚至IE7模式下看起來很正常,但是當我使用IE8或IE9標準模式時,表格中的一些行最終比它們應該高一些(即包含圓角圖像的行)並且沒有多少被迫的高度似乎工作。是否有一些基本的表格顯示方法我錯過了?除了IE8和IE9之外,這在所有瀏覽器中都很好,這對我來說是莫名其妙的。我複製的代碼(與完全合格的圖像鏈接),以jsbin,你可以在這裏查看:
http://jsbin.com/ofedet/IE8/IE9中的表問題

我所知道的最好的方法是繼續前進,並與申報單或與其他一些語義元素替換這些但是暫時我希望能夠解決這些問題以避免災難,直到我能夠讓他們相信重新設計的投資回報。

+0

它是如何應該看起來將是有益的屏幕截圖。 –

+0

+1爲了努力修復一個網站使用quirksmode來阻止它! – Spudley

+0

它看起來像問題已解決,但它應該看起來的樣子是它在jsbin預覽中的每個其他瀏覽器中的外觀。 – NateDSaint

回答

1

讓這些圖像浮動。

#Table_01 img { 
    float: left; 
} 
+0

完全有效,但如果你能解釋原因,我很樂意。 – NateDSaint

+0

在非嚴格模式下,圖像默認爲[block](http://htmlhelp.com/reference/html40/block.html)元素。在嚴格模式下,圖像默認爲[內嵌](http://htmlhelp.com/reference/html40/inline.html)元素(因此與字符站在相同的基線上,導致它們看起來比預期的「更高」留下一個幽靈般的底部填充)。你也可以使它成爲'display:block',這樣就可以模擬非嚴格的行爲,但是當你真的想要嚴格時,浮動它們會更好。 – BalusC

+0

Gotcha。我認爲這與兩者之間的顯示模式問題有關,但我的假設是它隱藏在表中而不是表中的內容。謝謝! – NateDSaint

0

嘗試加入這個CSS:

#Table_01 a img { border:0; margin:0; padding:0; } 
+0

這不適用於我的測試案例 – NateDSaint

+0

對不起,這是一個理論:我的IE開發工具欄廢棄了我,所以我無法嘗試它。很高興看到你的工作雖然。 – joshmax

+0

當我試圖測試它時,hehe也與我一樣,這就是爲什麼我最終只是把它扔在jsbin上,所以人們可以在那裏破解。感謝您的幫助! – NateDSaint