我該如何解決這個CSS異常問題？

我有我認爲是一些非常基本的CSS，它在FF4和IE8中的表現有所不同。我該如何解決這個CSS異常問題？

有問題的CSS是這樣的：

div.showme { 
    border: 1px dotted blue; 
    position: absolute; 
    top :10px; 
    bottom :10px; 
    left: 1%; 
    right: 33%; 
    overflow: auto; 
    padding: 0.8em 1em 0.8em 1em; 
    line-height:1.75em; 
    } 

    div.showme a { 
    padding: 0em 5px 0em 5px; 
    margin: 0; 
    white-space: nowrap; 
    color: #FF00FF; 
    background-color:#E6E6FA; 
    border: 1px solid grey; 
    padding: 0em 4px 0em 4px; } 

    div.showme a:link  { color: blue; } 
    div.showme a:visited { color: #1E90FF; } 
    div.showme a:active  { color: red; }

相關的HTML看起來像這樣：

<div class='showme'> 
    <a href='one'>one</a> 
    <a href='two'>two</a> 
    ... 
</div>

的問題是，是不是一直顯示填充，在IE8。

enter image description here

在Firefox中，它的工作原理是我所期望的。

工作示例：
http://jsbin.com/ogosa4

使用上述工作的示範，如果調整的窗口中，您將看到「龍頭」元素填充的DIV中的每一行，從零到非零變。

我該如何解決這個問題？

來源

2011-05-11 Cheeso

+1爲真棒問題，我想知道答案以及。你嘗試過'reset.css'嗎？ – pixelbobby 2011-05-11 16:15:25

其實當我最初看到它時，我在頁面中重置了yahoo css。我從簡單的演示中刪除了它，因爲我認爲它是無關緊要的。 – Cheeso 2011-05-11 16:24:19

IE的缺點通常會遇到'extraneous.css'：|如果她使用IE 6，我會傾倒一個女孩...不會說謊。 – pixelbobby 2011-05-11 16:30:29

如果添加display: inline-block;您div.showme a {}填充會在IE中也得到應用，但它與線高度產生一定的影響，你可能需要過指定追加保證金的

來源

2011-05-11 16:24:03 DanielB

+1我不完全確定，但這聽起來像一個很好的答案。 – pixelbobby 2011-05-11 16:27:20

'inline-block'是awesom，但是如果你需要支持IE7（或者更糟的是IE6），請小心，在這種情況下你可能需要使用瀏覽器黑客。 – Spudley 2011-05-11 16:31:09

我知道，但他問了關於IE8，所以我認爲它值得發佈。 – DanielB 2011-05-11 16:32:44

我已經看到了歌劇這種行爲。填充進入上一行。如果鏈接中有多個單詞，請嘗試display: inline-block和white-space:nowrap ...

您可以安全地在IE7中使用inline-block並添加內嵌標記。

來源

2011-05-11 18:44:17

我該如何解決這個CSS異常問題？

回答

相關問題