運行Quirks模式的IE8的CSS問題

在IE8和Quirks模式中運行時，在兩個圖像之間存在一些神祕的填充。這兩張圖片充當我未來網站的標誌。運行Quirks模式的IE8的CSS問題

我已經將問題隔離爲單個html文件， http://etcbc.org/ie_problem/ie.html。

它應該說「東多倫多浸禮會教堂」。正如你所看到的，「toro」「nto」之間現在有一個空格。什麼導致這個空間在IE8和怪癖模式下運行？

來源

2009-06-19 burnt1ce

你在Firefox中遇到了一個更大的問題：圖像不是並排的。 – 2009-06-19 03:23:52

我已經更新了我的答案以符合您的評論，但是我無法自己測試新解決方案，因爲加載圖像時出現「需要401授權」錯誤。 – 2009-06-19 11:48:35

非IE瀏覽器在該頁面上更糟糕。

你的圖像每個都在他們自己的<a />標籤，其風格爲「display: block;」。顯示塊通常將每個元素放在它自己的行上（取決於應用於它們的其他樣式）。

要解決此問題，請從元素中刪除「display：block」樣式。

<a href="http://www.etcbc.org/"> 
    <img style="border-bottom: 0px; border-left: 0px; padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; text-decoration: none; padding-top: 0px" src="logo_1.png" /> 
</a> 
<a href="http://www.etcbc.org/"> 
    <img style="border-bottom: 0px; border-left: 0px; padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; text-decoration: none; padding-top: 0px" src="logo_2.png" /> 
</a>

如果您需要的圖像是塊級元素，使用浮相互對準他們，然後修復所造成的將浮動元素的頁面上的任何（潛在的）佈局問題，使用this clever solution。

如果可能，您應該考慮對樣式使用類，而不是內聯它們。現在事情的方式，他們將成爲維護的噩夢。另外，如果你有控制權，put a doctype（我推薦使用XHTML 1.0 Transitional。所有酷炫的孩子都這樣做！）在你的網頁的HTML，所以你不要打開怪癖模式。離開怪癖模式可能會導致很多頭痛，尤其是如果您嘗試使用「新」技術使您的網站更好地爲您的用戶。

來源

2009-06-19 03:27:03

使用有效的DOCTYPE，走出怪異模式的：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

來源

2009-06-19 03:30:38 briscoe

只是有些事情，怪異模式做一個快速鏈接：

http://www.cs.tut.fi/~jkorpela/quirks-mode.html

它說的是，默認的水平邊距quirksmode中的圖像是3個像素。而且這個填充在CSS中被忽略，所以可能是這樣。

來源

2009-10-12 08:51:01

運行Quirks模式的IE8的CSS問題

回答

相關問題