消えた 1px_html/css_WEB-ITnose

前件

以前、1px border: from line-height to 0-5px について記事を書きました。この記事では、スケーリング方法を使用できると述べましたが、rem またはパーセント単位を使用すると、境界線イメージ ソリューションを使用しているときに一部のモデルで 1px 境界線が消えることがよくありますが、この記事では消えません。これは1pxの枠線が消える理由と後者が正常に表示できる理由です。

LayoutUnit

サブピクセル (つまり、小数点ピクセル) を実際の物理ピクセルに変換する 2 つの方法については、LayoutUnit で説明します。概略図は次のとおりです。 >

enクロージングIntRect

このメソッドを使用すると、最終的な物理サイズが元のサイズを超えるため、ボックス モデルでオーバーフローが発生する危険性があります。

x: floor(x)y: floor(y)maxX: ceil(x + width)maxY: ceil(y + height)width: ceil(x + width) - floor(x)height: ceil(y + height) - floor(y)pixelSnappedIntRect

pixelSnappedIntRect

変換中のインタラクション

    x: round(x)    y: round(y)    maxX: round(x + width)    maxY: round(y + height)    width: round(x + width) - round(x)    height: round(y + height) - round(y)采用这种方式的好处是能够保证最终渲染的物理大小不超过原来的大小，使得在屏幕等分出现小数的情况也不会溢出到下一行。本人将七个div等分整个屏幕宽度，在不同的分辨率下并没有发生溢出的情况，因此猜测浏览器采用了这套方案。

各 DOM ノードが上記の解決策のいずれかを個別に採用する場合、1px は消えません。 ただし、実際にはドキュメント内ではフローでは、前のノードが占めるサイズは、サブピクセル変換後の後続のノードのサイズにも影響し、それによって後者のサブピクセル変換に影響を与えます。

iPhone 4 の画面サイズを例として、それを 7 つの等しい部分に分割します:

、計算された幅と実際のレンダリング幅を出力します:

.box { font-size: 10px; width: 14.2857%; height: 14.2857%; background: pink; float: left; } .box:nth-child(2n) { background: gray; }

$.each($(".box"), function(index, val) {var computedWid = getComputedStyle(val).width;var wid = val.offsetWidth;$(val).html(computedWid + '<br>' + wid + 'px');

表示効果は次のとおりです:

計算ルールは次のとおりです:

サイズ最初のボックスのサイズは 45.7031 ピクセル、キャリー サイズは 46 ピクセルで、次のボックスをカバーし、カバレッジ幅は 1-0.7031=0.2969 ピクセルです。

2 番目のボックスのサイズは次のように縮小されます。 45.7031-0.2969=45.4062px なので、この時点で破棄された 0.4062px は次のボックスにマージされます。
3 番目のボックスのサイズは 45.7031+0.4062=46.1093px に拡張されます。したがって、46px に丸められ、次のボックスにマージされます。幅は 0.1093px;
4 番目のボックスのサイズは 45.7031+0.1093px=45.8124px に拡張されるため、キャリーは 46px となり、次のノードの幅は 0.1876px;
5 番目のボックス ボックスのサイズは 45.7031-0.1876=45.5155px に縮小されるため、丸めは 46px となり、次のノードの幅 0.4845px をカバーします。
4. 6 番目のボックスのサイズは 45.7031-0.4845=45.2186px に縮小されるため、45px に丸められ、幅 0.2186px の次のノードにマージされます。
5. 7 番目のボックスのサイズは 45.7031+0.2186=45.9217px に拡張されるため、46px に丸められます。
計算結果は、表示効果に合わせて、さまざまな解像度を調整してテストできます。このルールに従って正しい結果を予測できます。
結論

スケール、ズーム、ビューポートなどのスケーリング ソリューションを使用して実装された 1px は、実際には 0.5px の CSS ピクセルであるため、使用できます。前の DOM によってノードが覆われてしまうため、そのサイズが 0.5px 未満になり、その結果、ノードが 0px に丸められて消えてしまいます。

1. border-image メソッドは消えません。border-image ソリューションのサイズは 1px CSS ピクセルであるため、前の DOM ノードがどのようにカバーされても、最大値はなくなります。 0.499999px より大きい、つまり 0.5px 以下なので、0.499999px で覆われていても、そのサイズは 0.511111px のままで、最終的な効果は 1px に丸められるため、このソリューションによって実装された 1px の境界線は常に表示されます。 。