1

テーブルを含むページがあります。

にはが<tr>ありborder-bottom: 1px dotted black;ますが、下の画像からわかるように、非常に奇妙なレンダリングになっています。これがなぜなのか誰か知っていますか？

ここに画像の説明を入力

関連CSS

.basket-item{
    border-bottom: 1px dotted black;
    border-top: 1px dotted black;
    padding: 10px 0;
}

.basket-item td:nth-of-type(2){ //included this as it seems to be the second td in every row
    padding: 25px;
    vertical-align: top;
    text-align: left;
}

HTML 構造は標準のテーブルで、<tr>のクラスがあります.basket-item

助けてくれてありがとう

4

2 に答える 2

3

コメントからの拡張:

この問題は、Chrome (または WebKit) にのみ/主に影響しているようです。いくつかの失敗した試行の後、最終的にこれを思いつきました:

追加

h4 {
    margin-bottom: 1.5em; /* or whatever length that ends in an integer pixel */
}

この理由は、あなたが指定したことです

font-size: 14px;

また、Chrome には次のような内部 CSS があります。

h4 {
    -webkit-margin-before: 1.33em; /* works like margin-top */
    -webkit-margin-after: 1.33em; /* works like margin-bottom */
}

それは浮動小数点数のピクセル ( 14 * 1.33 = 18.62) を作成し、(おそらく以下の他の要素、特にfloat: left要素で)、Chrome は「プレースホルダー」の残りのスペースの高さを「計算」する必要があるようで、最終的に浮動小数点数になります。それは「200pxに非常に近い」です。

観察:

私の Chrome では、<td>高さは 250 ピクセル (を含むpadding) にする必要があります。それ<td>はpadding: 25pxであるため、「内部の高さ」は である必要が200pxありますが、デフォルトのスタイルでは、Chrome は開発者ツールで<td>が実際の199.609375px高さであることを示しています。を整数に上書きするmargin-bottomと、内側の高さが 200px に「正規化」されました。h4

于 2013-04-22T03:14:34.887 に答える
1

それは明らかにテーブル表示です。tdまたはtrを別のディスプレイ ( など) に変更すると、表示inline-blockは消えますが、レイアウトは壊れます。

また、ビューポートのズームレベルにも依存しているようです。拡大すると、奇妙な境界線（上下の境界線の両方）を消すことができます。高さは250pxから251pxに時々切り替わりますtr。td

情報が非常に少ないため、別のパラメーターを変更する必要があると推測することはできません。

実際の解決策がない場合は、 または のいずれかのディスプレイ タイプを変更し、tr要件tdに合わせてレイアウトを調整することを検討してください。

于 2013-04-18T11:27:53.833 に答える