まず第一に、私のデザインではなく、テーブル、私の謝罪。
このウェブサイトでは、販売中の商品がテーブルレイアウトで表示されています。ウェブサイトはすでに公開されていますが、十分にテストされていないようです。開発者は休日なので、修正する必要があります。問題はボックスモデルの解釈にあります。ここでは例を示します。
Chromeレンダリング:
Firebugオーバーレイを使用したFirefoxレンダリング:
何が起こっているのかというと、Chromeはtdの高さにパディングを追加し(高さ:55px +パディング-上:5px +パディング下:10px = 70px)、Firefoxは指定された高さを維持し、内側にパディングを追加します。ボックスモデルの問題はIEの問題だと思いましたが、残念ながら。
しかし、くだらない部分は、私がそれを修正できないように見えるということです。tdには、cssに干渉すると思うcolspan="2"
aがあります。
td.productFooter {
background-color: #C4BFB9;
height: 55px;
padding-bottom: 10px;
padding-top: 5px;
}
display
に(および他のいくつかのオプション)を変更しようとしましたが、これにより高さが適切に設定されますが、 (デフォルトではテーブル自体の背景色に戻りinline-block
ます)失われます。background-color
を設定display: block
すると、高さは良好ですが、背景は最初のセルのみを色付けし、を無視しcolspan="2"
ます。
MDN によると-moz-box-sizing: content-box;
、それを修正する必要がありますが、それは何もしません。
誰かがこれを修正する方法を知っていますか?