样式不正确，除非应用背景颜色。

Question

我正在开发一个移动网站，因此我正在使用CSS尽可能地使事物变得流动起来。

我遇到了一个奇怪的困难。在一个div容器内，我有一个<p>，它应该填满整个div的宽度。我尝试过width:auto，width:100%等，但在Android浏览器上似乎都不起作用。以下是示例：

iOS（正确）：

Android（不正确；没有完全展开；添加了比iOS版本更多的文本，以便您能看到我在说什么）：

这两个屏幕截图是从各自的模拟器中获取的。

然而，这里有个奇怪的事情...如果我给这些<p>应用的类添加一个背景颜色，那么Android浏览器就允许<p>填充其父div的全部宽度（与iOS相同）。然而，真正奇怪的是，如果我将背景颜色设置为透明（我以为我已经骗过它了），它就会像示例中所示的那样回到原来的状态。

因此，只有在<p>应用了背景颜色后，它才能正确引用其CSS...我是不是太过糊涂，还是这是Android浏览器的问题？有什么办法可以解决它吗？

谢谢您的时间。

- master_gracey

---

不要使用<p>标签，而应该使用<span>或<div>标签。<p>标签用于段落，安卓内置浏览器会将段落的宽度占满以方便阅读。 - Alex Mund

Answer 1

尽管这可能不是最好的解决方案，但我最终只创建了一个“透明”的 PNG 图片并将其设置为 <p> 的背景，这解决了问题……如果你愿意这么说的话。 :) 我必须假设这是 Android 浏览器中的某种错误，因为我在每个桌面和移动浏览器中都尝试过这种方法。

- master_gracey

---

经过一些调研和测试，我也发现这个解决方案目前是最好的“修复”方法，虽然它看起来有些丑陋。 - tomvon

我也在互联网上搜索了很久，但没有找到其他可靠的解决方案，而这些方案都需要编写太多的代码。这似乎是最不易出错的解决方案，所以谢谢！ - exoboy

Answer 2

这是安卓手机的预期行为。如果您通过捏合缩放页面，您就不必水平滚动即可增强副本文本的可读性。

您可以在自己的手机上管理浏览器设置，但这并不是您想要的解决方案。

可以通过将背景图像应用于所需元素的变通方法来“修复”此问题。

可以使用base64编码的数据URL实现此操作：

background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);

- yunzen

Answer 3

在您的移动浏览器设置中，寻找名为“自适应页面”的选项并将其禁用。这个设置（在Android中）默认是开启的。关闭它，您的文本就会如预期般流畅显示。

- Brian

---

我认为要求每个访问网站的访客调整他们浏览器的设置并不是一个可行的解决方案。 - master_gracey

Answer 4

或者此

以上的任何元素可能是问题所在。

如果您给

元素固定宽度，它是否能正常工作？

- Nabeel Khan

---

我需要布局是流式的，所以我不能使用固定宽度。 - master_gracey