Vil*_*lx- 5 html css layout background overflow
拿这个简单的例子打开它:
<html>
<body style="background-image:url(http://upload.wikimedia.org/wikipedia/commons/2/21/Mandel_zoom_00_mandelbrot_set.jpg);background-repeat: no-repeat; background-position: top center;">
<div style="width: 8000px; border: 3px solid red;">Demo</div>
</body>
</html>
页面是这样的,身体有一个顶部居中的背景图片和一个溢出窗口边界的包含元素,所以有水平滚动(如果你有一个超过8000px的显示器,那么你真的很酷,请让窗口更小,刷新).
问题在于,由于某种原因,<body>不会拉伸以包含<div>.它只是与视口保持相同的宽度并<div>溢出它.这反过来导致背景居中于错误的位置并将其裁剪为视口的大小.当你滚动到右边时相当难看.
我已经找到了解决这个问题的方法,但我想知道为什么会出现这种情况？它似乎在浏览器中也是一致的.但在我看来,这是违反直觉的,基本上是错误的.容器元素应该足够大以容纳它的子元素 - 除非它们绝对定位,当然在这种情况下它们不参与布局计算.
块根本不会水平拉伸以容纳他们的孩子内容; 从来没有.(1)这种情况只发生在垂直轴上.(2)从逻辑上讲,两个尺寸都不会有弹性; 一个必须修复(父母).在CSS中,正常流程中块元素的宽度仅来自父级(减去填充,边距,边框),然后高度随之而来,看看你可以在块的宽度中放入多少内容并使其流动.
由于CSS 的这个怪癖,背景图像可能出现在一个令人困惑的地方,误导你实际发生的事情:
对于其根元素为HTML"HTML"元素或XHTML"html"元素的文档,其中"background-color"的计算值为"transparent",而"background-image"的计算值为"none",则用户代理必须使用在为画布绘制背景时,从该元素的第一个HTML"BODY"元素或XHTML"body"元素子元素计算背景属性的值,并且不得为该子元素绘制背景.如果仅为根元素绘制它们,那么这些背景也必须固定在同一点上.
这是一个令人讨厌的黑客,因为人们习惯于在'body'上放置背景并让它填充视口,即使<body>元素本身不代表视口.
(1)除少数特殊情况外,float与position: absolute未声明的元素相似width.
(2)除非你通过设置height/ 故意停止overflow.
| 归档时间： |
|
| 查看次数： |
3979 次 |
| 最近记录： |