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

| 在研究了最基本的HTML设置之后，我发现在每个浏览器中，顶部ѭ0标记的包装均无法正常工作。我得到了背景颜色为黄色的background0ѭ元素。然后是宽度为1000px，高度为100px且背景颜色为红色的<body>元素。在查看页面并调整视口大小时（因此水平滚动条变为可见），请完全向右滚动并在您喜欢的Web开发人员工具中查看指标。 body标签会正确显示为1000px的宽度，但将鼠标悬停在HTML元素上，该HTML元素将按照视口分辨率的大小被截断。换句话说，“ 0”元素包装不正确。即使<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>

已邀请:

1 个回复

播匣扦阔食

可以对HTML元素的任何block元素说同样的话。如果它的任何子项都比它宽，则它们“泄漏”到它的外部（请参阅：http：//jsbin.com/edoza5）。您假设HTML仅是另一个块元素时就很特殊。确实，浏览器处理在body元素上设置宽度之间存在不一致的地方，这是包含包装器很常见的原因之一。这样做非常有用，可以使用两个100％的“ root”元素。

要回复问题请先登录或注册

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

1 个回复

发起人

html

css

scroll

viewport

问题状态

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

与内容相关的链接

1 个回复

发起人

html

css

scroll

viewport

问题状态