2

Firefoxは、スタイルが設定されたTDの1pxの境界線をどのように計算できborder: 0ますか？また、Firefox Webインスペクターは、実際に境界線が0pxまだスタイル設定されていることをどのように表示でき1pxますか？

これはFirefoxWebインスペクターのスクリーンショットです。

スクリーンショット

そして、21行目で参照されている無実のCSSは次のとおりです。

.smart-table-tr-active td {
    border: 0;
}

そして、検査官によって示される他の上書き規則はありません。そしてそれはChromeとIE8+で完全にうまく機能します...どこからともなく1pxの境界線を持つ「狂気」はFirefoxでのみ起こります（クリーンなプロファイル、拡張機能なし、最新バージョン-Windows 7 64ビットでは17.0.1）。

サンプルへのリンク（行をクリックして「展開」し、展開された行のTDを調べます（ええ、舞台裏でJavascriptの「DOM手術」が少しありますが、それでも、Firefoxのような成熟したブラウザーは「頭を冷やして」、検査官でさえその仕事をしてください...）

4

2 に答える 2

4

テーブルが折りたたまれた境界線を使用しており、次の行のセルの上部の境界線が1pxであるため、 1pxです。ただし、折りたたまれた境界線モデルでは、次のセル（および折りたたまれているため行）の上部の境界線はこのセル（および行）の下部の境界線と同じであるため、同じ値で表示されます...より正確には、それぞれ奇妙な方法で境界線の半分を取得しますが、検査官でそれを表す良い方法は実際にはないかもしれません。

ここを読んでください：http ：//www.w3.org/TR/CSS2/tables.html#collapsing-borders

于 2012-12-15T17:44:40.750 に答える
4

問題の原因はCSSファイルにあります：

table.smart-table td {
    border-collapse: separate;
    /*position: relative;*/
}

border-collapseTD要素にプロパティを設定しています。ただし、そのプロパティはTD要素には適用されないため、破棄されます。代わりに、TABLE要素にのみ適用されます。

CSSルールを次のように変更します。

table.smart-table {
    border-collapse: separate;
}

そしてあなたの問題は解決されます。別々の境界線を設定すると、境界線が共有されないようになります（Borisが彼の回答で説明したように）。

于 2012-12-15T17:53:43.000 に答える