4

我的水平滚动条有问题。我不希望它出现。实际上它只显示在 Chrome 中，而不显示在 Internet Explorer 中。我能做些什么？我尝试在 css 类中修改宽度和填充，但这也改变了布局。test 里面的内容是动态的，所以它可以垂直溢出，这很好，因为我只不需要水平滚动条。

HTML：

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

CSS：

.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
}

如果您需要，这是一个小提琴：http: //jsfiddle.net/XLY9L/

谢谢

4

5 回答 5

8

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

box-sizing: border-box;

出现水平滚动条的原因是填充和边框默认添加到您为元素提供的任何宽度。通过将其显式设置为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;
}
于 2013-04-03T08:42:28.230 回答
8

您可以尝试使用简单的方法

BODY {
    overflow-x:hidden;
}
于 2013-04-03T09:01:32.167 回答
3

或者@micadelli 的回答，您可以删除width: 100%因为<div class="test">是块级元素，并且会自动填充它在当前容器中占据的水平空间。

于 2013-04-03T08:46:18.993 回答
3

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

html, body {
    max-width: 100%;
    overflow-x: hidden;
}
于 2015-10-26T07:36:59.273 回答
0

您也可以在您的网站中尝试这个简单的 CSS 代码。只需写溢出-x：隐藏；在身体标签上。它会隐藏在你的身体之外。

于 2013-04-03T09:55:20.457 回答