我该如何解决这个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异常问题？

回答

相关问题