元素未正确包装,在调整大小视口上显示并向右滚动

问题描述 投票:0回答:1

在使用最基本的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 css scroll viewport
1个回答
0
投票

对于HTML元素所在的任何块元素都可以这样说。如果它的任何一个孩子比它宽,那么它们就会“泄漏”在它外面(见:http://jsbin.com/edoza5)。当你只是另一个块元素时,你假设HTML是特殊的。

确实,浏览器如何处理在body元素上设置宽度之间存在不一致,这是包含包装器常见位置的原因之一。那个,并且有两个100%'root'元素可用。

© www.soinside.com 2019 - 2024. All rights reserved.