html - Padding in Firefox 1px short or IE 1px over

Question

我在使用不同为 1px 的图像时遇到以下 html 代码的问题；简而言之，在 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>

火狐:http://www.cbg.me.uk/html/firefox.jpg

即:http://www.cbg.me.uk/html/ie.jpg

我不确定如何解决这个问题，好像我添加 1px Firefox 没问题，但 IE、Chrome 和 Opera 超过 1px。

谢谢

Answer 1

我相信这是浏览器边界的差异。将您的 css 放入样式表并将其添加到有问题的 block 中:

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

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