溢出属性不应用于body元素

Question

我的问题是，当我在body元素上设置overflow:hidden或overflow:auto时，没有真正发生的事情。我在chrome和firefox上测试了这个。它适用于div元素，但由于某种原因不适用于body。

您可以在fiddle

上看到我的意思

所以我的问题是，如果有人知道为什么会发生这种情况以及如何解决身体因素？

Answer 1

来自spec：

  

UA必须应用＆＃39;溢出＆＃39;属性设置在视口的根元素上。当根元素是HTML＆＃34; HTML＆＃34;元素或XHTML＆＃34; html＆＃34;元素，该元素有一个HTML＆＃34; BODY＆＃34;元素或XHTML＆＃34; body＆＃34;作为孩子的元素，用户代理必须改为应用溢出＆＃39;从第一个这样的子元素到视口的属性，如果根元素上的值是“可见的”＃39;可见＆＃39;用于视口时的值必须解释为＆＃39; auto＆＃39;。传播值的元素必须具有“溢出”的使用值。 ＆＃39;可见＆＃39;。

简而言之，仅在body元素上设置overflow的值会导致该值传输到视口，从而导致body元素本身具有overflow: visible作为使用的值。

在html和body上更改overflow会阻止body元素丢失其指定值，因为viewport会从html元素中获取值而不是body元素。

Answer 2

以下代码可以解决您的问题。 你需要申请overflow：hidden;在body和html

上

https://jsfiddle.net/b2ap5j86/2/

table {
  border: 1px solid green;
}

td {
  border: 1px solid red;
  width: 100px;
  padding: 5px;
}

body {
  border: 1px solid blue;
  width: 200px;
  overflow: hidden;
}

html {
  overflow: hidden;
}

div {
  width: 200px;
  overflow: hidden;
}

或者你可以为你的元素使用div包装器并在其上应用overflow: hidden，我会建议这种方法，因为你有更好的控制，例如：

https://jsfiddle.net/b2ap5j86/3/

Answer 3

试试这段代码：

＆＃13;

＆＃13;

table {
  border: 1px solid green;
  table-layout:fixed;/*************define  table-layout****/
  width:100%;   /*************define width here****/
}

td {
  border: 1px solid red;
 /*  width: 100px; /*********remove width here***************/
  padding: 5px;
  
  width:10%;/*************define width here****/
}

body {
  border: 1px solid blue;
  width: 200px;
  overflow: hidden;
}

div{
  width: 200px;
  overflow: hidden;
  
}

＆＃13;

<table>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
</table>
<br>
<div>
  <table>
    <tr>
      <td>text</td>
      <td>text</td>
      <td>text</td>
      <td>text</td>
      <td>text</td>
      <td>text</td>
      <td>text</td>
      <td>text</td>
    </tr>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;