隐藏水平滚动条

我遇到了水平滚动条的问题。我不想让它出现。实际上它只在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/

感谢

来源

2013-04-03 Gyonder

有一个对于这个简单的解决方案，只需添加到您的CSS声明：

box-sizing: border-box;

出现的原因，水平滚动条是填充和边界是默认添加到任何宽度你给你的元素。通过将其明确设置为border-box，填充和边框将包含在该宽度值中。

此属性在IE8 +，火狐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-03 08:42:28 micadelli

谢谢。我只添加添加-moz-box-sizing：border-box; -webkit-box-sizing：border-box;盒子尺寸：边框;使其与我的浏览器兼容。 – Gyonder

摇滚！这就是你需要的全部支持 – micadelli

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

来源

2013-04-03 08:46:18 sweetamylase

'box-sizing'有它的位置，但这是正确的解决方案。将100％宽度添加到块级元素只是引入了一堆问题，因此了解*为什么不是必需的。另外，如果需要IE7支持（urgh），那么'box-sizing'是一个非启动器。 – CherryFlavourPez

我同意这是答案**如果没有特殊原因将其宽度手动设置为100％。 – micadelli

@micadelli - 基于提供的简化案例，这是最简单的解决方案。我很好奇你什么时候选择手动将宽度设置为100％？ – CherryFlavourPez

您可以simples方式

BODY { 
    overflow-x:hidden; 
}

来源

2013-04-03 09:01:32

这并不能解决任何问题，它只是隐藏了问题。 – CherryFlavourPez

-1

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

来源

2013-04-03 09:55:20

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

html, body { 
    max-width: 100%; 
    overflow-x: hidden; 
}

来源

2015-10-26 07:36:59 vasanth

是的，因为它也会禁用滚动。我们希望能够水平滚动。这会禁用该功能。 – Radmation

隐藏水平滚动条

回答

相关问题