Html 隐藏水平滚动条

水平滚动条有问题。 我不想让它出现。事实上，它只在Chrome浏览器中显示，在InternetExplorer中不显示。 我能做什么？我曾尝试在css类中修改宽度和填充，但这也会改变布局。测试中的内容是动态的，所以它可以垂直溢出，这很好，因为我不想要水平滚动条

HTML:

<div class="test">
    <table>
        <tr>
            <td>test</td>
        </tr>
    </table>
</div>

.test {
    BORDER-TOP: #7F9DB9 1px solid;
    BORDER-RIGHT: #7F9DB9 1px solid;
    BORDER-LEFT: #7F9DB9 1px solid;
    BORDER-BOTTOM: #7F9DB9 1px solid;
    WIDTH: 100%;
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 10px;
    PADDING-BOTTOM: 10px;
    PADDING-TOP: 10px;
    HEIGHT: 100%;
    BACKGROUND-COLOR: #ffffff
}

如果您需要，这里有一把小提琴：

---

谢谢

有一个简单的解决方案，只需将此添加到您的CSS声明中：

box-sizing: border-box;

出现水平滚动条的原因是，默认情况下，填充和边框会添加到您为元素指定的任何宽度。通过将其显式设置为

边框框

，填充和边框将包含在该宽度值中

IE8+、FireFox 19+（通过使用

-moz box sizing

）以及iOS Safari和Android（通过使用

-webkit box sizing

）支持此属性

此外，我强烈建议使用速记css，如下所示：

.test {
    BOX-SIZING: border-box;
    WIDTH: 100%;
    HEIGHT: 100%;
    PADDING: 10px 0 10px 10px;
    BORDER: #7F9DB9 1px solid;
    BACKGROUND-COLOR: #ffffff;
}

---

除了@micadelli的答案之外，您还可以删除

宽度：100%

，因为

是一个块级元素，它会自动填充当前容器中所占的水平空间。

您可以尝试使用simples方法

BODY {
    overflow-x:hidden;
}

---

你也可以在你的网站上尝试这个简单的css代码。只需写溢出-x:hidden；在身体标签上。它将从你的身体中隐藏

将此代码添加到CSS中。它将禁用您的水平滚动条

---

谢谢我只添加到添加-moz框大小：边框框-webkit框大小：边框框；框大小：边框框；使其与我的浏览器兼容。继续！这就是获得全面支持所需的全部内容，而这正是正确的解决方案。向块级元素添加100%宽度只会带来一系列问题，因此理解为什么不需要它很重要。此外，如果需要IE7支持（urgh），那么

框大小调整

是不可能的。我同意，如果没有特殊原因手动将其宽度设置为100%，这就是答案。@micadelli-根据当时提供的简化案例，这是最简单的解决方案。我很好奇你什么时候会选择手动将

宽度设置为100%？@CherryFlavourPez我必须承认我没有想出一个简单的例子，什么时候使用100%：）但我真正的意思是如果宽度不需要显式地设置为任何%'s@micadelli绝对-修改所有内容的长方体模型（）这几乎肯定会让OP的生活更轻松。对于响应速度快的网站，我发现这是唯一的选择。但即使在这种情况下，您也不会显式地将宽度设置为100%——这没有任何作用。是的，因为它还将禁用滚动。我们希望能够水平滚动。这将禁用该选项。请更改问题标题，因为它不会表达您的问题。
html, body {
    max-width: 100%;
    overflow-x: hidden;
}