Question

我正在尝试创建一个响应的框，它使用最大宽度和宽度的组合：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。

我认为将盒子大小更改为内容框会有所帮助，但是盒子大小似乎没有任何区别。

Answer 1

尝试使用以下链接修复任何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>

ie8 - 宽度：100％时边框添加到最大宽度

1 个答案: