[英]Hide horizontal scrollbar
我的水平滚动条有问题。 我不希望它出现。 实际上它只显示在Chrome中,而不是在Internet Explorer中显示。 我能做什么? 我已经尝试在css类中修改宽度和填充,但这也会改变布局。 内部测试的内容是动态的,因此它可以垂直溢出,这很好,因为我只是不想要水平滚动条。
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/
谢谢
你可以尝试简单的方法
BODY {
overflow-x:hidden;
}
有一个简单的解决方案,只需将其添加到您的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;
}
作为@ micadelli的答案的替代,您可以删除width: 100%
因为<div class="test">
是块级元素,并将自动填充它在当前容器中占用的水平空间。
将此代码添加到CSS中。 它将禁用水平滚动条。
html, body {
max-width: 100%;
overflow-x: hidden;
}
你也可以在你的网站上试试这个简单的css代码。 只写overflow-x:hidden; 在身体标签上。 它会躲避你的身体。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.