簡単なテストケース:
もう一つの例：
問題:ズーム ページを 90% に変更すると、境界線が 1.111 (75% で 1.333) になり、レイアウトが壊れます。
nokia の Web サイトでは、スペースが残っていないため、上部のコンテナーが壊れていることがわかります。CSSDesk テストケースでは、計算されたスタイルを調べると、境界線の幅が大きくなっていることがわかります。
なぜこれが起こるのですか？ボーダーがEMまたは%に設定されていないのに、なぜスケーリングするのですか?
6698 次
3 に答える
9
理由は説明されていますが、私が発見したばかりの回避策を共有したいと思います: 多くの場合、境界線を、境界線のように見えるが要素の外側の幅には追加されないボックス シャドウに置き換えることができます:
それ以外の
border: 1px solid red;
書きます
box-shadow: inset 0 0 0 1px red;
width: 102px;
height: 102px;
div の幅と高さは、両側の 1 ピクセルの境界線がなくなったことに対応するように調整する必要があります。ズームアウトしても、ブラウザはボックスの影を境界線と同じように扱います。つまり、1px 未満に縮小することはありませんが、要素の幅には影響しないため、レイアウトが崩れることはありません。
あるいは、おそらく box-sizing: border-box; を使用できます。いくつかの同様の効果に。
于 2014-07-17T10:37:21.193 に答える
6
これは、1 ピクセルの境界線を縮小するという問題の成果物です。何が起こるかを説明するためzoom: 0.5;
に、CSS に含めるようにテスト ケースを変更しました: http://cssdesk.com/zn4Lx
計算されたスタイルを調べると、境界線の幅が 2px になることに注意してください。何が起こるかというと、Chrome は要素を縮小しようとしますが、拡大縮小後も境界線を表示したままにするためには、境界線の幅を 1 ピクセルにする必要があります (結局のところ、1 ピクセルはコンピューター画面でレンダリングできる最小単位であり、境界線の幅が 1.0 より小さい浮動小数点数に縮小されると、0px に切り捨てられて表示されなくなります)。ただし、スケーリングを正当化するために、式を満たすように初期幅を調整することで過剰に補償します。
new_width = old_width * scale
この例ではnew_width = 1px、 とであるため、 としてscale = 0.5再計算old_widthし2pxます。ただし、スケーリング後にレンダリングされる境界線の実際の幅はまだ1px.
したがって、あなたの例では、調整された古い幅は約1.11111111pxになり、レンダリングされた境界線の幅は1px広くなりますが、レイアウト内の 1px より大きい他のすべての幅も約 90% 縮小されているため、余裕がありません幅 1 ピクセルの境界線の場合、レイアウトが壊れます。
于 2013-10-14T01:06:09.503 に答える