繁体   English   中英

什么会导致<p>元素在Android浏览器中不跨越全宽

[英]What would cause a <p> element to not span full width in the Android browser

我被要求看一个奇怪的问题而且无法弄明白。 基本上

元素通常会跨越整个宽度,因为它们是块元素,但在某些页面上它们似乎并不想要。 我已经在默认的ICS Android和Dolphin上对此进行了测试,并且两者都在播放。 这个问题总结了这个问题,只有答案不起作用: 为什么Android浏览器不会在整个浏览器宽度上跨越这一段?

更新:一个奇怪的解决方案? 如果我设置以下CSS p {background:#fff; 它解决了问题,可能会导致一些奇怪的问题。 问题是,我需要背景是透明的。

这是一个黑客,但我的解决方案是设置背景:url(''); 在我的段落和标题标签上。 我需要我的背景是透明的,所以我不能设置颜色。

奇怪的背景设置:rgba(0,0,0,0); 由于某种原因不起作用?

如果您想要安全并实际提供有效的图片网址,您可以使用:

background:url(data:image / png; base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQIW2NkAAIAAAoAAggA9GkAAAAASUVORK5CYII =);

这是base64 100%透明单像素背景。

我会注意到,当我将视口设置为640时,这种情况才开始发生,因此移动网站可以适用于任何移动浏览器。

这似乎是一个错误,视口缩放功能无法正常工作。

这个旅行还不错。
我将Android设置为不自动适合页面,修复了问题。
然后我将手机设置为自动适合页面,添加到我的css background: black; <p> background: black; 它是固定的。
另一个奇怪的事情是,在我的样式表中,如果我设置了p{ text-align: center}<p>像我期望的那样跨越所有方式,我的手机设置为自动适合页面而没有背景设置。 我也做了text-align: right ,按预期工作。 然后我改变了text-align: left ,现在又被打破了。 非常非常奇怪的问题....

<li>标签也是如此。 同样的问题。 我通过在我的css样式表中添加p, li {background: url('');}来解决这两个问题。

而不是在<td>中使用<p><div>或其他标签,您只需使用<span>即可。 似乎从android 4开始,默认的互联网浏览器有一些解释问题。 我之前在android 2上测试过,它运行得很好,没有任何“调整”。

基于这个问题和你之前的问题,似乎没有明显的理由说明它不应该起作用。 然而,当天发生的事情是,如果你没有声明(在一些未命名的浏览器中)特定的属性,那么属性就不会像它们应该的那样inherit

因为没有理由<p>应该以这种方式呈现,并且以前曾经是一个已知问题,我建议将<body>width设置为100%因为它可能是遗失的情况。

编辑:替代方案

前面提到的问题的另一个流行的解决方案是将有问题的元素包装在具有指定width的类container<div>中。 两者通常都是可行的解决方案,可显着提高跨浏

希望这会有所帮助,FuzzicalLogic

我在2个不同的网站上有同样的问题。 我必须通过设置透明的png背景图像来解决这个问题。

在我的例子中,p元素恰好具有设备屏幕宽度的宽度 - 因此旋转设备会改变p元素的宽度。

甚至在p上设置一个固定的宽度!important也被忽略了!

这可能不是你需要的答案,但我发现如果你给出一个CSS display:inline;它是有效的display:inline; 属性而不是display:block; 默认情况下,它不会再跨越整个屏幕。 我不完全确定这是否适用于Android(我没有),但我的笔记本电脑上有类似的问题并修复了它。

我发现这个问题的解决方案确实有效! 这实际上是Android浏览器“Auto-Fit Pages”中的一个设置。 关闭它将确定地解决这个问题。

麦克风

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM