4

水平スクロールバーに問題があります。現れたくない。実際には Chrome でのみ表示され、Internet Explorer では表示されません。私に何ができる？css クラスで width と padding を変更しようとしましたが、これによりレイアウトも変更されます。テスト内のコンテンツは動的であるため、垂直方向にオーバーフローする可能性があります。水平スクロールバーだけが必要ないため、これは問題ありません。

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 に答える
0

Web サイトでこの単純な CSS コードを試すこともできます。overflow-x:hidden; と書くだけです。ボディタグについて。それはあなたの体から隠れます。

于 2013-04-03T09:55:20.457 に答える