隐藏水平滚动条 [英] Hide horizontal scrollbar

问题描述

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

$ b HTML：

 < div class =test> 
< table> 
< tr> 
< td>测试< / 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; 
高度：100％; 
 BACKGROUND-COLOR：#ffffff 
} 
  

需要它： http://jsfiddle.net/XLY9L/

Thanks

解决方案

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

  box-sizing：border-box; 
  

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

此属性在IE8 +，FireFox 19+（通过使用 -moz-box-sizing ）和iOS Safari和Android（通过使用 -webkit-box-大小）

另外，我强烈建议使用简写的css，如下所示：

  .test {
 BOX-SIZING：border-box; 
 WIDTH：100％; 
高度：100％; 
 PADDING：10px 0 10px 10px; 
 BORDER：＃7F9DB9 1px solid; 
 BACKGROUND-COLOR：#ffffff; 
} 
  

I have a problem with the horizontal scrollbar. I don't want it to show up. Actually it only shows up in Chrome and it doesn't in Internet Explorer. What can I do? I have tried modifying width and padding in the css class, but this changes the layout as well. The content inside test is dynamic so it can overflow vertically, and this is fine because I only don't want horizontal scrollbar.

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
}

here is a fiddle if you need it: http://jsfiddle.net/XLY9L/

Thanks

解决方案

There's a simple solution for this, just add this to your CSS declaration:

box-sizing: border-box;

The reason for horizontal scrollbar appears is that padding and border is by default added to whatever width you give to your element. By setting it explicitly to border-box, the padding and border are included in that width value.

This property is supported in IE8+, FireFox 19+ (by using -moz-box-sizing) and iOS Safari and Android (by using -webkit-box-sizing)

Also, I strongly suggest using shorthand css, as follows:

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

这篇关于隐藏水平滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！