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>

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

IE：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

画像の行を font-size: 1px; に変更しました。1pxを追加しました。パディングボトムに。

IE 6/8/9、Firefox (最新)、Chrome (最新)、Opera (最新) でテスト済みで、すべて揃っています。

于 2013-01-29T15:44:04.843 に答える
1

このハックを使用してください。あなたのCSSの中に次のようなものを入れてください：

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

セレクターはどこにありますか - 違いがわかる場所にクラス/IDを書きます。そこで、FireFox のためだけに新しいパディングを設定できます。

于 2013-12-19T22:20:21.677 に答える