1

テーブルに TD のグリッドを作成しようとしていて、TD セルの高さの合計がテーブルの高さの 100% を占めているため、TD の CSS の高さを小数点に設定すると、 、計算された高さが Chrome 28 で予想されるよりも大きくなっています (そして、最後の数行が押しつぶされます)。しかし、CSS の高さを整数に変更すると、計算された高さが正しくなります。

ここで問題の再現を見てみましょう: http://jsfiddle.net/RUwLH/3/

この例では、各テーブルに 33 行あります。

各テーブルの td セルには異なる css があることに注意してください。

.main td {
    width:50%;
    height: 3.03%;    
}

.main2 td{
       width:50%;
    height: 3.00%;    
}

面白いことに、IE10 ではセルが正しく表示されているように見えますが、2 セットのテーブルが重なって表示されます。

FF16ではこれで問題なく動作します。

誰でもこの問題の解決策を知っていますか?

4

1 に答える 1

0

これは、Webkit ベースのブラウザーのバグである可能性があります。しかし、テーブル アルゴリズムを不必要に混乱させてしまいます...! テーブル アルゴリズムが単独で行う場合、各 TD の高さを明示的に設定する必要があるのはなぜですか? したがって、この問題を回避する最も簡単な方法は、TD の高さを設定しないことです。

更新された jsFiddle を参照してください: http://jsfiddle.net/RUwLH/4/

...

意味論の観点から、あなたのコードは非常に疑わしいものであり、各要素に同じクラスを与えることも非常に非効率的な CSS です (Fiddle のためにそれを行ったことを願っています)。

何年たっても、テーブルは依然として「特別な問題」です...! したがって、それらは表形式のデータにのみ使用し、それ以外には使用しないでください!

HTML と CSS は、意味的にさらに多くの他の可能性を提供します!

于 2013-09-10T09:48:52.897 に答える