ie8-當width：100％時，邊框添加到最大寬度

Question

我正在嘗試創建一個具有響應能力的框，它使用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似乎沒有什么區別。

Answer 1

請嘗試以下鏈接來修復任何Internet Explorer問題：

（下載response.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>

嘗試將最大寬度設置為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-當width：100％時，邊框添加到最大寬度

問題描述

1 個解決方案

解決方案1
0 2013-06-25 12:28:35

ie8-當width：100％時，邊框添加到最大寬度

問題描述

1 個解決方案

解決方案1 0 2013-06-25 12:28:35

解決方案1
0 2013-06-25 12:28:35