次のほとんどのHTMLでは、水平スクロールバーがChromeに表示される原因は何ですか？

HTML：次のほとんどのHTMLでは、水平スクロールバーがChromeに表示される原因は何ですか？

<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; 
}

クロームの結果：

enter image description here

jsFiddle - FFやIE9でもないが、これを示すことがhttp://jsfiddle.net/XBvWb/18/

注意スクロール・バー。

誰でも私を啓発することはできますか、どういうことですか？入力ボーダー、パディングとマージンを削除

EDIT

- 次の行は余分なスクロールバーの原因となっているhttp://jsfiddle.net/XBvWb/41/

出典

2013-01-06 mark

div： – Musa

の 'overflow：auto'は、以下の回答への私の回答をご覧ください。 – mark

divをブロックインラインに設定すると、スクロールバーが消えます –

私の推測によれば、クロムは丸めに問題があります。

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

入力の現在の幅が15 * 99％*の13px = 193.05px

である私は、スクロールバーが表示されてみましょう.05pxと思います。

これはまた、約11emの幅でスクロールバーが消える理由を明確にしています。 Chromeの処理能力が向上します。

出典

2013-01-06 20:44:04 dave

+1、良い答え。すべてのブラウザでこれらの処理が異なります。 Chromeの場合、親コンテナのサイズの計算方法は、要素のサイズの計算方法とはまったく同じではありません。 – Sparky

これは絶対にそうです。私は99％を100％に変更しました。今はOKです。ありがとう。 – mark

：

overflow: auto;

をあなたにもちょうどそれを残して、追加することができますdivへの明示的な幅：

width: 100%;

かのdivブロックレベル要素

display:block

は、基本的にはinline-blockレベル要素内blockレベル要素を置くことになったことがないしています。

出典

2013-01-06 20:18:45

なぜオーバーフローオートが問題になるのですか？何も要素がオーバーフローしているとは限りません。その場合、autoはスクロールバーを表示しません。 – mark

これは、chromeが 'inline-block 'レベルの要素をどのように扱うかだけです。 'display：block'を使用した場合、それはうまくいくでしょう。規約では 'inline-block'要素の中に' block'レベルの要素を置くことは決して決してありません（あなたの場合、 'inline-block' divの中の' textbox'）。 –

'input'はブロックレベルの要素とはみなされないので、' inline-block'の中に入れても問題ありません。 – Sparky

オーバーフロー：コンテンツがクリップされると、自動的にスクロールバーが強制的に表示されます。入力上のあなたの幅：15emがコンテンツをクリップし、スクロールバーを強制的に表示させています。

出典

2013-01-06 20:22:48

なぜコンテンツが強制的にクリップされるのですか？ 15emがコンテンツをクリップするなら、14emは確かにそうではありません - そうですか？間違って、15emを14emに変更すると、同じ効果が表示されます。 – mark

私はディスプレイに問題が実際にあると思う：インラインブロック、これを表示するように変更すると：インラインで、問題を解決するはずです。 –

また、11emでクリッピングを停止します。 –

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

（ほとんどのサイトのように）あなたのサイトには、水平スクロールを使用していない場合、あなたは、単にこのようなx軸上のすべてのオーバーフロー非表示にすることで、この問題を修正することができます

body { 
    overflow-x:hidden; 
}

注：またはあなたがそれを設定することができますhtmlタグもあります。どちらが良いか分からない。

出典

2016-04-06 06:43:25 phocks

次のほとんどのHTMLでは、水平スクロールバーがChromeに表示される原因は何ですか？

答えて

関連する問題