在使用最基本的HTML设置后,我发现顶级<html>
标记的包装在每个浏览器中都无法正常运行。
我有<html>
元素,背景色为黄色。然后是<body>
元素,宽度为1000px,高度为100px,背景颜色为红色。
查看页面并调整视口大小(以便水平滚动条变为可见)时,完全向右滚动并查看您喜爱的Web开发人员工具中的指标。
body标签正确显示,宽度为1000px,但然后将鼠标悬停在HTML元素上,该元素将以视口分辨率的大小截止。换句话说,<html>
元素没有正确包装。即使<html>
标签的背景颜色在整个页面上正确呈现?
你可能认为。为什么这很重要,颜色显示得恰到好处。何必?
问题在这个网站上也变得清晰了!向下滚动到此页面底部,调整浏览器窗口大小,然后向右滚动。观察页脚背景img
会发生什么。
使用背景图像/颜色时,这真的很烦人。
我在网上找到了解决这个问题的解决方案,但它并不优雅。
/* Wrap Fix! */
/*set min-width for ie*/
min-width: 1000px;
/*force horizontal scroll for widths <1000*/
width:expression(document.body.clientWidth < 1000 ? "998px" : "auto" );
我的问题是:
这是浏览器的正确行为吗?如何以不同方式解决这个问题?
For more information, discussion and demo's check this forum
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Weird html wrap..</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
background-color: yellow;
}
body {
background-color: red;
height: 100px;
width: 1000px;
}
</style>
</head>
<body>
</body>
</html>
对于HTML元素所在的任何块元素都可以这样说。如果它的任何一个孩子比它宽,那么它们就会“泄漏”在它外面(见:http://jsbin.com/edoza5)。当你只是另一个块元素时,你假设HTML是特殊的。
确实,浏览器如何处理在body元素上设置宽度之间存在不一致,这是包含包装器常见位置的原因之一。那个,并且有两个100%'root'元素可用。