为什么Android浏览器不会在整个浏览器宽度上跨越此段落？ [英] Why won't the Android browser span this paragraph over the full browser width?
问题描述
问题：
问题
页面宽度
- Firefox
- Firefox Mobile（在SGS2上使用4.0.3测试）
- Chrome
- Chrome Mobile测试版（在SGS2上使用4.0.3测试）
- li>
- Internet Explorer Mobile（使用Windows Phone模拟器测试）
- Opera Mobile（在SGS2上使用4.0.3测试）
- Android原生浏览器（在SGS2和Android模拟器上使用4.0.3测试）
我必须做什么，
$ b >请注意，这个例子减少了，以显示我在一个更大的页面上的问题。所以我想解决方案尽可能少破坏尽可能。例如，将我网站上的所有段落设置为浮动，这似乎是一个坏主意。
width
增加 p width c $ c> CSS类无效。
相对值： 100％和 1000％没有效果。值<100％具有效果（段落变得更薄）。
绝对值： 1000px 不展开宽度，低值减少。
float
$ c> float：right; 在段落上，它将根据需要显示：
CSS重设
插入这些：
< percentage>
指定百分比宽度。相对于生成的框的包含块的宽度计算百分比 。如果包含块的宽度取决于这个元素的宽度，那么结果布局在CSS 2.1中是未定义的。
它是相对于包含块的宽度计算的。回顾我们的树， p 包含在 body 中。那么，我们的包含块的宽度是多少？
我们还没有定义宽度，所以它是由浏览器确定的一些值。
这里的解决方案是定义主体的宽度，这转换为添加6个字符：
html，body，p {width：100％;显示：block; margin：0px; padding：0px; }
现在你的 html width是窗口宽度的100％， body 的宽度是您的 html 和您的 p 的宽度是您的正文的100％。这应该得到所有的宽度的权利。
底线是考虑你的DOM树和检查CSS标准...
The Problem:
The Question
The paragraph will fill the complete width of the page in
- Firefox
- Firefox Mobile (tested with 4.0.3 on SGS2)
- Chrome
- Chrome Mobile Beta (tested with 4.0.3 on SGS2)
- Internet Explorer
- Internet Explorer Mobile (testes with Windows Phone Emulator)
- Opera Mobile (tested with 4.0.3 on SGS2)
- Android native browser (tested with 4.0.3 on SGS2 and Android emulator)
What do I have to do so it does the same in the default Android browser?
I tried:
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.
width
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.
float
When setting float : right; on the paragraph, it will display as desired:
CSS Reset
When I insert these CSS Reset styles, the width of the paragraph is unaffected.
position
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.
The Source:
<!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>
You can see it here: http://jsfiddle.net/EYcWL/embedded/result/ or go there directly:
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
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; }
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:
<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.
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.
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; }
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.
The bottom line is to think about your DOM tree and check out the CSS standard...
这篇关于为什么Android浏览器不会在整个浏览器宽度上跨越此段落？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
