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的支持。