html - CSS: 水平スクロールバーが表示されているときに背景色が適用されない

Question

このマークアップ

<div style="background-color: red;">
    abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd
</div>

ブラウザー ウィンドウの幅が十分に広い場合は適切に動作しますが、水平スクロール バーを表示するために小さくすると、表示されている部分にのみ背景色が適用されます。

これは修正できますか？

Answer 1

で試してみてくださいposition:absolute;

<div style="background-color: red; position:absolute;">
    abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd
</div>

編集 ：

またはdisplay:inline;

<div style="background-color: red; display:inline;">
    abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd
</div>

Answer 2

で試してみてくださいposition:absolute。

<div style="background-color: red;position: absolute;">
    <p>abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd</p>
</div>

他の方法はいくつかありwidthます。

<div style="background-color: red;width: 500px">
    <p>abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd</p>
</div>

Answer 3

試す：

<div>
<p style="background-color:red;">
abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd
</p>
</div>

Answer 4

<div style="background-color: red;display:table">
    abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd
</div>

ただし、IE7 はサポートされていません。