1

まず第一に、私のデザインではなく、テーブル、私の謝罪。

このウェブサイトでは、販売中の商品がテーブルレイアウトで表示されています。ウェブサイトはすでに公開されていますが、十分にテストされていないようです。開発者は休日なので、修正する必要があります。問題はボックスモデルの解釈にあります。ここでは例を示します。

Chromeレンダリング： Chromeレンダリング

Firebugオーバーレイを使用したFirefoxレンダリング： 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;、それを修正する必要がありますが、それは何もしません。

誰かがこれを修正する方法を知っていますか？

4

3 に答える 3

0

私はだましました、しかしそれは働きます。divの中にtdを追加し、position:relative;height:55px;それで解決しました。本当にきれいな解決策ではありませんが、新しいサイトが公開されるまで（今から3週間後）はうまくいきます。

<td class="productFooter" colspan="2" >
    <div style="position:relative;height:55px">
    *all the content*
    </div>
</td>
于 2012-08-14T09:21:25.850 に答える
0

私のアドバイス：テーブルを捨てる。CSSのみを使用して表形式のレイアウトをコーディングするのにそれほど時間はかかりません。特に、製品データのように情報がデータベースから生成される場合はそうです。事前に自分でコーディングしてから、ライブサイトに適用してください。

于 2012-08-14T09:01:10.953 に答える
0

これは、Firefox16で修正されたhttps://bugzilla.mozilla.org/show_bug.cgi?id=248239のように見えます。これは10月9日に出荷される予定です。

したがって、時間枠によっては、それまで待つのが最も簡単な場合があります。

于 2012-08-17T03:37:07.943 に答える