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 中添加了边框，使得 maxwidth 为 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 回答