2

使用不同为 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。

谢谢

4

3 回答 3

2

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

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

If you want show like IE (not 100% on this one):
border-collapse:separate
于 2013-01-29T15:51:21.973 回答
1

请使用这个技巧。在你的 CSS 里面放这样的东西：

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

选择器在哪里 - 在您看到差异的地方写下您的班级/ID。在那里您可以为 FireFox 设置您的新填充。

于 2013-12-19T22:20:21.677 回答
1

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

已经在 IE 6/8/9、Firefox（最新）、Chrome（最新）和 Opera（最新）中进行了测试，并且都排好了。

于 2013-01-29T15:44:04.843 回答