Question

我在使用下面的html代码时遇到问题，不同的是1px;在Firefox中，它可以在IE9，Chrome Opera中使用，它只是Firefox。

我已经尝试删除图像，所有这些都排好了。有关IE和Firefox的屏幕截图，请参阅代码：

这是html代码：

XXX

        <div style="background:url(images/package_bg.gif) repeat-x; border-color: #ccc; float: left; width: 20px; padding-top: 4px; padding-bottom: 2px; padding-left: 5px; border-style: solid; border-right-color: #FFFFFF; border-width: 1px;"><img src="images/info.png" onmouseover="site.showTooltip(this,'xxx');" onmouseout="site.hideTooltip('xxx');"></div>
        <div style="background:url(images/package_bg.gif) repeat-x; border-color: #ccc; float: left; width: 173px; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; border-style: solid; border-right-color: #FFFFFF; border-width: 1px; text-align: center;">xxx</div>
        <div style="background:url(images/package_bg.gif) repeat-x; border-color: #ccc; float: left; width: 173px; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; border-style: solid; border-right-color: #FFFFFF; border-width: 1px; text-align: center;">xxx</div>
        <div style="background:url(images/package_bg.gif) repeat-x; border-color: #ccc; float: left; width: 173px; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; border-style: solid; border-width: 1px; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; text-align: center;">xxx</div>
        <div style="clear: both; padding-bottom: 0px;"> </div>

Firefox：http://www.cbg.me.uk/html/firefox.jpg

IE：http://www.cbg.me.uk/html/ie.jpg

我不知道如何解决这个问题，就像我添加1px Firefox一样好，但是IE，Chrome和Opera是1px结束。

由于

Answer 1

我相信这是边界的浏览器差异。将您的CSS放在样式表中，并将其添加到有问题的块中：

If you want show like FF: 
border-collapse:collapse

If you want show like IE (not 100% on this one):
border-collapse:separate

Answer 2

将图像的行更改为font-size：1px;并添加1px;到了填充底部。

已经在IE 6/8/9，Firefox（最新），Chrome（最新）和Opera（最新）中进行了测试，并且全部排成一行。

Answer 3

请使用此黑客。在你的CSS里面放了这样的东西：

@-moz-document url-prefix() {
  .selector {
     padding-bottom: XX px;
  }
}

选择器在哪里 - 将您的类/ ID写在您看到差异的位置。那里你可以为FireFox设置你的新填充。

填充Firefox 1px短或IE 1px结束

3 个答案: