隱藏水平滾動條

我遇到了水平滾動條的問題。我不想讓它出現。實際上它只在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

隱藏水平滾動條

回答

相關問題