1

1-pixel-border とheight:29%のdivがあります。何らかの理由で、Chrome は下の境界線なしでレンダリングします。

http://jsfiddle.net/9WVuC/4/を参照してください

この問題は、実際のパーセンテージ値とコンテナー サイズによって異なります。それらを変更すると、境界線が表示される場合と表示されない場合があります。実際のdivの高さを計算しているときに、Chrome レンダリング エンジンに丸め誤差があるようです。また、そのdivにオーバーフローと位置が指定されている場合にのみ発生します。

これは既知のバグで、回避策が存在する可能性がありますか? もちろん、高さを手動で再計算してJSで設定することで、そのパーセンテージ値を取り除くことができますが、それはあまりエレガントな解決策ではありません.

4

4 に答える 4

5

これはoverflow:hidden;、div のスタイルが原因であり、境界線は実際には問題の div の外側に表示されるため、div の高さ (% である) によると、この境界線は考慮されません。

コードを見て、問題を修正し、オーバーフローした場合に要素のコンテンツに同じ影響を与えるoverflow:hidden;div の含まれる要素 ( ) に移動することをお勧めします。tdclass="lower"

于 2012-10-18T11:08:11.363 に答える
0

これはおそらく、画面/ウィンドウのサイズと要素の計算されたサイズ (小数点以下) によっては、レンダリングの問題です。私にとっての回避策はbox-shadow、境界線が欠落している場所に非表示を配置し、レンダリングを修正することでした。下の境界線の場合は、次のようになります。

box-shadow: 0 1px 0 0 rgba(255,255,255,0);
于 2016-10-11T09:03:28.157 に答える
0

高さを次のように設定することで、この「バグ」を修正できますheight: 28.95%;

レイアウトにテーブルを使用しないでください。表形式のデータにのみ使用してください。

于 2012-10-18T10:59:27.853 に答える
0

高さを下げるか、overflow: hidden を削除します

lower{
height: 28%;
position: relative;
overflow: hidden;
border: solid 1px black;
}

フィドルのデモ

于 2012-10-18T11:00:16.697 に答える