元素未正确换行，显示在调整大小视口上并滚动到右侧
在尝试了最基本的 HTML 设置后，我发现顶部 标签的包装在每个浏览器中都无法正常工作。
我有背景颜色为黄色的 元素。 然后是宽度为 1000px、高度为 100px、背景色为红色的 元素。
查看页面并调整视口大小（以便水平滚动条变得可见）时，完全向右滚动并在您最喜欢的 Web 开发人员工具中查看指标。
body 标签以 1000px 的宽度正确显示，但随后将鼠标悬停在 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" );
我的问题是：
这是浏览器的正确行为吗？ 如何以不同的方式解决这个问题？
<!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>After playing around with the most basic HTML setup I discovered that the wrapping of the top <html> tag does not function properly, in EVERY browser.
I've got the <html> element with a background color yellow.
Then the <body> element with a width of 1000px, height of 100px, and a background color red.
When viewing the page and resizing the viewport (so the horizontal scrollbar becomes visible), scroll completely to the right and check out the metrics in your favorite web developer tool.
The body tag is properly displayed with a width of 1000px, but then hover over the HTML element which will be cutoff at exactly the size of the viewport resolution. In other words the <html> element does not wrap properly. Even though the background color of the <html> tag is rendered properly over the entire page?
You might think. Why is this important, the color is displayed properly so. Why bother?
The problem becomes clear on this very site also! Scroll down to bottom of this page, resize your browser window and then scroll to the right. Watch what happens to the footer background img.
When working with background images/color, this is really annoying.
I have found a solution on the web to fix this problem, but its not elegant.
/* Wrap Fix! */
/*set min-width for ie*/
min-width: 1000px;
/*force horizontal scroll for widths <1000*/
width:expression(document.body.clientWidth < 1000 ? "998px" : "auto" );
My questions are:
Is this proper behavior of the browsers?
How can this be solved differently?
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>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
对于任何块元素（即 HTML 元素）来说都是如此。如果它的任何子项比它更宽，那么它们就会“泄漏”到它之外（请参阅：http://jsbin.com/edoza5 ）。当 HTML 只是另一个块元素时，您就假设它是特殊的。
确实，浏览器处理 body 元素宽度设置的方式之间存在不一致，这也是包含包装器常见的原因之一。那，有两个 100% 的“根”元素可以使用是很有用的。
The same can be said for any block element, which the HTML element is. If any of its children are wider than it then they 'leak' outside of it (see: http://jsbin.com/edoza5). You're assuming that the HTML is special when it is simply just another block element.
It's true that there are inconsistencies between how browsers handle setting a width on the body element, which is one of the reasons why a containing wrapper is common place. That, and it's useful having two 100% 'root' elements to play with.