web-dev-qa-db-ja.com

Chromeでズームインすると枠が消えます

私はこれが本当にシンプルな形式です： http://jsfiddle.net/TKb6M/91/ 。 Chromeを使用してズームインまたはズームアウトすると、入力境界が消えることがあります。たとえば、90％にズームすると、次のようになります。

enter image description here

当然、走行距離は異なります。

あなたがそれらについて疑問に思っている場合のために<span>タグ、 の推奨事項に従って追加しました。入力要素を残りのすべての水平スペースに配置するにはどうすればよいですか 。

CSSに問題がありますか、それともChromeバグですか？Firefoxで問題なく動作しているようです。この動作を回避するにはどうすればよいですか？

ありがとう。

htmlcssborderzooming
35
Luís Pureza

Chrome=サブピクセル計算を強制していますが、通常これは奇妙な動作をします。

入力の高さを30pxに変更すると、90％のズームは正常に機能します（これは27pxであるため）が、75％のズームは機能しません（これは22.50 pxであるため）。

境界線の幅を3pxにすることで、これを回避することもできます。この場合、境界線の幅は場所によって異なります。

とにかく、最善の解決策は、入力の周りにより多くのスペースを与えることです。これにより、境界がサブピクセルの位置にある場合でも、境界をきれいに描くことができます。

28
vals

LuísPurezaが彼の問題を解決したと確信していますが、これを変更するだけで本当に簡単に解決できます。

このようなテーブルの境界線がある場合：

INPUT,TEXTAREA {
border-top: 1px solid #aaa
}

これを次のように変更します。

INPUT,TEXTAREA {
border-top: thin solid #aaa
}

私はこのリンクでこの解決策を見つけました： https://productforums.google.com/forum/#!topic/chrome/r1neUxqo5Gc

それが役に立てば幸い

50
Víctor Campoy Marco

私はゲームに遅れていることはわかっていますが、少し曖昧にしてボーダーの幅を1.5pxに設定すると、毎回うまくいくようです。

4
David Morton

ボーダーdivラッピングボーダーレスinputで同じ問題が発生しましたが、ここでのすべての素晴らしい答えは私を助けませんでした最後に、追加：

overflow: auto;

div要素（問題のある境界線を持つ要素）に対してトリックを行いました。

4
Elad

これは、固定の高さを設定しているためです。ズームすると、入力がその高さよりも大きくなると、境界線が消えます。代わりにline-heightとpaddingを使用して、目的の高さを取得してください-参照 更新されたFiddle

更新：私が言ったことを無視してください、それはあなたがoverflow:hiddenあなたのスパンで、それを削除するとうまくいくはずです。ただし、入力の幅を変更する必要がある場合があります。

余談ですが;あなたはあなたのスパンをうまく機能するブロック要素にしていますが、少し悪いように見えます。可能であれば、インライン要素をブロックに変更する代わりに、ブロック要素を使用してみてください。

3
Henrik Janbell

2018年にchrome=で同様の問題が発生しました-入力とテキストエリアに上部の境界がありませんでした。修正は、CSSで上部の境界を単に次のように指定することでした。

INPUT,TEXTAREA {
border-top: 1px solid #aaa
}

それが必要だった理由を説明することはできません。特定の場所で境界が失われただけでしたが、少なくともそれは迅速な回避策でした。

1
user2728841

オーバーフロー：隠しが必要な場合は、オーバーフロー：幅の問題が発生しているブラウザーに対してのみ隠しと言及します。他のブラウザでは、メモの表示：幅が自動的に正しくなるように、また拡大/縮小時に境界が消えないようにフレックスします。

例：IEの場合のみ、私の幅は正しくありませんでした。

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.spanStyles {
display: block;
overflow: hidden;
}
}

そして、ズームイン/アウトの問題がFirefoxとChromeで発生していたので、私は言及しました

.spanStyles {
 display : flex;
}

これにより、すべてのブラウザーで私の問題が解決しました。

0
Aarzoo Trehan