7

HTML:

<html>

  <body>
    <div>
      <input type="text">
    </div>
  </body>

</html>

CSS:

 body {
   font:13px/1.231 arial;
 }
 input {
   font:99% arial;
 }
 div {
   display: inline-block;
   overflow: auto;
 }
 input {
   width: 15em;
 }

Chrome での結果:

ここに画像の説明を入力

jsFiddle - http://jsfiddle.net/XBvWb/18/

FF も IE9 もこのスクロールバーを表示しないことに注意してください。

何が起こっているのか教えてください。

編集

入力ボーダー、パディング、マージンを削除 - http://jsfiddle.net/XBvWb/41/

4

4 に答える 4

10

私の推測では、Chrome には丸めに問題があると思われます。

入力幅に px の値を使用すると、スクロールバーが消えます。入力の font-size を 100% (この例では正確に 13px に等しい) に変更した場合も同様です。

入力の現在の幅は 15 * 99% * 13px = 193.05px です

.05px でスクロールバーが表示されると思います。

また、約 11em の幅でスクロールバーが消える理由も明確になります。Chromeがより適切に処理できるように切り上げます。

于 2013-01-06T20:44:04.097 に答える
1

次の行は、余分なスクロール バーを引き起こしています。

overflow: auto;

そのままにして、明示的な幅を div に追加することもできます。

width: 100%;

またはdivをブロックレベル要素にする

display:block

block基本的に、 level 要素内に level 要素を配置することは想定されていませんinline-block。

于 2013-01-06T20:18:45.323 に答える
1

overflow:auto は、コンテンツがクリップされた場合にスクロールバーを強制します。入力の width: 15em により、コンテンツがクリップされ、スクロールバーが強制的に表示されます。

于 2013-01-06T20:22:48.667 に答える
0

Chrome では水平スクロール ボックスが表示されるが、Firefox では表示されないという同様の問題があります。

あなたのサイト (ほとんどのサイトと同様) が水平スクロールを使用していない場合、次のように x 軸のオーバーフローをすべて非表示にするだけでこの問題を解決できます。

body {
  overflow-x:hidden;
}

注: または、htmlタグにも設定できます。どちらが良いかわかりません。

于 2016-04-06T06:43:25.367 に答える