为什么不能在Android浏览器跨越这一段在整个浏览器的宽度?浏览器、能在、宽度、在整个

2023-09-05 06:22:07 作者:〃死亡辶霊

该段将填充页面的整个宽度

The paragraph will fill the complete width of the page in

火狐 在Firefox移动(与4.0.3上SGS2测试) 在Chrome浏览器 在Chrome浏览器测试版手机(与4.0.3上SGS2测试) 在Internet Explorer中 在移动互联网浏览器(睾丸与Windows Phone模拟器) 在Opera移动(与4.0.3上SGS2测试) 在Android原生浏览器时(4.0.3上SGS2和Android模拟器测试)

什么我必须这样做,它在默认的Andr​​oid浏览器一样的吗?

What do I have to do so it does the same in the default Android browser?

请注意,本实施例减少要显示的我有一个大得多的页面上的问题。所以,我想解决方案要尽可能少破坏性越好。例如,设置的所有的我的网站上飘起段落似乎是一个坏主意。

Please note that this example is reduced to show the problem which I have on a much larger page. So I would like the solution to be as little disruptive as possible. For example, setting all paragraphs on my site to float seems like a bad idea.

增加宽度值 P CSS类属性没有任何效果。 相对值: 100% 1000%没有任何效果。价值和小于100%有效果(段变薄)。 绝对值: 1000px 不扩大宽度,低值减小它虽然

Increasing the value of the width property on the p CSS class has no effect. Relative values: 100% and 1000% have no effect. Values <100% have an effect (paragraph becomes thinner). Absolute values: 1000px doesn't expand the width, low values decrease it though.

当设定浮动:权利; 上的一段,它将会显示为期望:

When setting float : right; on the paragraph, it will display as desired:

当我将这些 CSS复位的样式,段落的宽度不受影响。

When I insert these CSS Reset styles, the width of the paragraph is unaffected.

当设定位置绝对上的一段,它将会显示为所需。但我不能确定这将是安全的,一般已启用。

When setting position to absolute on the paragraph, it will display as desired. But I'm unsure if that would be safe to generally have enabled.

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Android Browser Issue</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
      body {
        border : 3px dotted green;
        margin : 0;
        padding: 0;
      }
      p {
        border : 3px solid red;
        margin : 0;
        padding: 0; 
      }
    </style>
  </head>
  <body>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </body>
</html>

您可以在这里看到: http://jsfiddle.net/EYcWL/embedded/result/ 或去有直接:

You can see it here: http://jsfiddle.net/EYcWL/embedded/result/ or go there directly:

推荐答案

这是不是一个错误,你不需要在ECMAScript中的修复程序来解决这个问题。

This is not a bug, you don't need a fix in ECMAScript to solve this.

您必须考虑其中的内容所在的树。

You have to think about the tree in which your content resides.

window
 \- html
   \- body
     \- p
       \- content

那么,你的内容的宽度由CSS属性决定了 P 元素。所以,你会希望文本一样宽度浏览器的窗口,我们可以尝试把它的宽度为100%;是这样的:

So, your content's width is determined by the CSS attributes on the p element. So, as you will want the text to be as width as your browser's window is we can try to put its width to 100%; thus:

p { width: 100%; display: block; margin: 0px; padding: 0px; }

不过,你会体验到,当你认为这是行不通的。但是,这是不是一个错误,只是标准的误解。 Let't看看的标准有什么告诉我们一个元素上设置一个百分比计算的宽度,看到的 宽度在可视化格式模型的细节性的:

However, you will experience that this isn't working as you thought. This is however not a bug, but simply a misunderstanding of the standard. Let't have a look at what the standard has to tell us about setting a percentual width on an element, see the width property in the visual formatting model details:

&LT;百分比&GT;   指定一个百分比宽度。百分比计算的相对于产生的框的包含块的宽度的。如果包含块的宽度取决于这个元素的宽度,然后将得到的布局是未定义的CSS 2.1。

<percentage> Specifies a percentage width. The percentage is calculated with respect to the width of the generated box's containing block. If the containing block's width depends on this element's width, then the resulting layout is undefined in CSS 2.1.

强调矿,这个文本说,它被计算相对于该包含块的宽度。回头看看我们的树, P 包含在。那么,什么是我们的包含块的宽度是多少?

Emphasis mine, this text says that it is calculated with respect to the width of the containing block. Looking back at our tree, p is contained within body. So, what's the width of our containing block?

我们还没有定义该宽度还,所以它正在上由浏览器确定的一些值

We haven't defined that width yet, so it is taking on some value determined by the browser.

这里的解决方案是定义身体的宽度为好,这相当于增加6个字:

The solution here is to define the width of the body as well, which translates to adding 6 characters:

html, body, p { width: 100%; display: block; margin: 0px; padding: 0px; }

所以,现在你的 HTML 的宽度是你的窗口的宽度为100%,的宽度你的 HTML 和您的 P 的宽度为100%是你的的身体100%。这应该让所有的宽度的权利。

So, now your html's width is 100% of your window's width, body's width is 100% of your html and your p's width is 100% of your body. this should get all the width's right.

底线是考虑你的DOM树,并检查了CSS标准...

The bottom line is to think about your DOM tree and check out the CSS standard...