11

これは、iPadの網膜と非網膜のiOS5および6でのみ発生します。

テーブルに境界線を付けようとしても、薄い白い境界線が表示されます。

問題の例はで見ることができますhttp://codepen.io/anon/pen/Kcexq。

pbを表示するには、iPadまたはシミュレーターが必要です。

白い境界線がある緑色のタブをよく見てください。

緑のタブをよく見てください白い境界線があります

レコードの場合、テーブルセルとしての表示でも同じことが起こります。

4

3 に答える 3

1

この問題は、ブラウザーがテーブル セルを意図的にきれいな 1 ピクセルの境界線でレンダリングすることに関係しており、その動作はほとんどの場合、背景色で表示されます。解決策は、問題のある領域を独自のテーブルにラップ/ネストし、セルの背景色ではなく、テーブルの背景色を設定することです。

ここでの議論は、このhttps://www.campaignmonitor.com/blog/email-marketing/2011/10/iphone-fail-the-trouble-with-table-borders-and-html-email/で非常に役立ちます。

于 2016-11-16T17:28:11.823 に答える
1

表示される細い境界線はdisplay:table-rowand/ordisplay:table-cellプロパティが原因のようです。

注：実際には白い枠ではなく、一種のrgba:(0,0,0,alpha); テーブルの背景色を変更すると、それがわかります。

tdスタイルをに変更するdisplay:inline-block;か、trスタイルを に変更するdisplay:block;と、セルの左右の境界線が削除されますが、下の境界線はそのまま残ります。

実際、何か (table、tr、td...) でオーバーライドborder-colorしてrgba(0,0,0,0);も何も変更されませんborder-collapse:collapse;(Morpheus が提案したように)。計算されたスタイルには、計算された境界線が表示されませんが、それでもここにあります...

注: iOS は、ユーザーのズーム スケールに応じて境界線を計算するようにも見えます (実際の iPad でテスト済み)。

Safari iOS のデフォルトのテーブル スタイルは次のとおりです。

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}

tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}

tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}

td, th {
    display: table-cell;
    vertical-align: inherit;
}

そのアルファ境界線を追加できる非表示の CSS をまだ探しています。何か見つかったら回答を更新します。

于 2013-03-11T12:55:02.867 に答える