47

私はこの本当に単純なフォームを持っています: http://jsfiddle.net/TKb6M/91/ . Chrome を使用してズームインまたはズームアウトすると、入力枠が消えることがあります。たとえば、90% にズームすると、次のようになります。

ここに画像の説明を入力

当然、走行距離は異なる場合があります。

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

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

ありがとう。

4

7 に答える 7

62

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

このような表の境界線がある場合:

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

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

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

このリンクでこのソリューションを見つけました: https://productforums.google.com/forum/#!topic/chrome/r1neUxqo5Gc

役立つことを願っています

于 2018-06-18T15:08:10.037 に答える
32

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

入力の高さを 30px に変更すると、90% のズームは問題なく動作しますが (これは 27px であるため)、75% のズームは機能しません (これは 22.50 px であるため)。

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

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

于 2013-01-09T16:43:16.123 に答える
3

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

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

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

于 2012-09-22T20:50:56.620 に答える
1

2018年にクロムで同様の問題が発生しました-入力とテキストエリアで上部の境界線がありませんでした。修正は、css で単純に上の境界線を指定することでした。

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

なぜそれが必要なのか説明できず、特定の場所で境界線が失われるだけでしたが、少なくともそれは簡単な回避策でした.

于 2018-04-17T08:31:54.567 に答える
0

オーバーフロー: 非表示が必要な場合は、幅の問題に直面しているブラウザーに対してのみ、オーバーフロー: 非表示に言及してください。他のブラウザでは、metion display: flex を使用して、幅が自動的に正しく取得されるようにします。また、拡大/縮小しても境界線が消えないようにします。

例: 私の場合、IE のみで幅が正しくなかったので、次のように述べました。

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

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

.spanStyles {
 display : flex;
}

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

于 2016-07-20T10:53:39.963 に答える