Android 浏览器将宽度设置为 100%，而不管应用于元素的边距(即 block 引号)

Question

在我的 Android 浏览器上浏览网站时，我最大的烦恼是阅读带有缩进 block 引号的文本。 Android 的 webkit 实现(在我看来是正确的)将任何文本元素的宽度设置为浏览器宽度。

然而，这意味着应用了左边距或填充的列表和 block 引用元素悬在可见屏幕的右边缘。这会带来烦人的阅读体验，因为用户必须不断地左右滚动才能阅读。

此行为几乎在任何在 Android 上查看的网站中都可见，我的感觉是这构成了浏览器中的错误。

但我的问题是:有人有好的 css 解决方案来防止这个问题吗？我试过将所有正文文本包装在最大宽度为 100% 的 block 级元素中，但具有左填充或边距的元素仍然悬在边缘之外。

Answer 1

你应该能够通过为 div/p/li 等设置盒子模型来解决这个问题。 -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;