2

max-width と width:100% の組み合わせを使用するレスポンシブなボックスを作成しようとしています。

これにより、ボックスの幅は max-width で設定されますが、親コンテナーが小さくなりすぎると、オーバーフローするのではなく、ボックスが縮小します。

これは ie9 と ff/chrome で動作していますが、ie8 標準モードでは、パディングが最大幅に追加されるようです。

例えば：

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
    <style>
        #test
        {
            border: 1px blue solid;
            width: 100%;
            max-width: 210px;
            display: block;
            height: 30px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
    </style>


    <span id="test"></span>
</body>

これにより、ie9、firefox、chrome で最大 210px 幅のボックスが作成されます。しかし、ie8 では、最大幅が 212px になるように境界線が追加されました。境界線を削除すると、ie8 では再び 210px になります。

box-sizing を content-box に変更すると役立つと思いましたが、box-sizing に違いはないようです。

4

1 に答える 1

0

次のリンクを試して、Internet Explorer の問題を解決してください。

(respond.min.js をダウンロード) https://github.com/scottjehl/Respond

(css3-mediaqueries.js をダウンロード) https://code.google.com/p/css3-mediaqueries-js/

<head>ダウンロード後、これをタグに追加します。

<script type="text/javascript" src="respond.min.js"></script>

ボックス全体をレスポンシブにするために、max-width を 100% に設定してみてください。ボックスの実際の幅を変更したい場合は、通常の幅を好きなようにしながら、max-width を 100% に保つ必要があります。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
    <style>
        #test
        {
            border: 1px blue solid;
            width: 100%;
            max-width: 100%;
            display: block;
            height: 30px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
    </style>


    <span id="test"></span>
</body>
于 2013-06-25T12:28:35.010 に答える