右端にFirefoxがオーバーフローしていますか？

Question

firefoxにバグがあるようです。コンテナの右端に何かを置くと（text-alignまたはfloatを使用して）、コンテナを大きくする必要があります。例えばので

-

<div style='width:100px; overflow:auto'> 
    <div style='width:50px; float:left;'>Something</div> 

    <div style='width:50px; float:right;'> 
     <h1 style='text-align:right;'>Title</h1> 
    </div> 
</div> 

は、Firefoxのスクロールバーを作成し、クロムで正常に動作するようです。何か案は？

Answer 1

あなたが見ているのは、テキストのペイントされたディメンションがレイアウトのディメンションよりも大きくなる可能性があるためです。これは特にイタリック体のテキストで表示されますが、特にサブピクセルのレイアウトとアンチエイリアスを使用するテキストで発生する可能性があります。

クロムはどのような種類のサブピクセルレイアウトもしないので、オーバーフローするテキストは無視されます。

あなたの最も簡単な賭けは、あなたの右フロートをoverflow:hiddenとしてスタイルすることです。

Answer 2

私はオブジェクトとaligenmentをやっている私は

<div style='width:100px; overflow:auto'> 
<div style='width:50px; float:left;'>Something</div> 

<div style='width:49px; float:right;'> 
    <h1 style='text-align:right;'>Title</h1> 
</div> 

このPROBはあなたを助けにはなりませんが、私は％の

Answer 3

をuseing時に申し訳ありませんが、あなたが質問再読たくさんそれをしなければなりません次のようにスクロールバーを削除できます：

<div style='width:100px; overflow:hidden'> 
    <div style='width:50px; float:left;'>Something</div> 

    <div style='width:50px; float:right;'> 
     <h1 style='text-align:right;'>Title</h1> 
    </div> 
</div> 

あなたはコンテンツの1pxを失います

Answer 4

これは動作するはずです。使用しているFirefoxとChromeのバージョンは明記していませんが、FF 9.0とChrome 16の場合は同じように動作します。つまり、スクロールバーが表示されます。これは、コンテンツが定義された幅を超えて拡張され、オーバーフローのデフォルト値が「可視」なので、右浮動divのh1がdivの境界を越えて拡大しているためです。 h1をpタグに変更すると、スクロールバーが消えることに注意してください。 （内容は国境を越えて延びているかを確認するためにコピー/貼り付け）ボックスモデルで何が起こっているかを説明します境界線を適用する

：それが必要として

<div style='width:104px; overflow:auto;'> 
    <div style='width:50px; float:left; border:1px solid red;'>Something</div> 

    <div style='width:50px; float:right; border:1px solid red;'> 
     <h1 style='text-align:right;'>Title</h1> 
    </div> 
</div> 

だから、再び、それが動作しています。コンテンツがコンテナの幅を超えてオーバーフロー値が割り当てられていない場合、オーバーフローのデフォルトはvisibleになり、コンテンツはコンテナの境界を表示して「プッシュ」します。この場合、外側のコンテナにオーバーフロー：autoがあるため、スクロールバーが表示されます。