盒大小：边界盒IE8 =>？(box-sizing: border-box => for IE

我想box-sizing: border-box的div标签。

对于Mozila Firefox的我已经尝试

        -moz-box-sizing: border-box;

为IE（Internet Explorer）中我已经尝试的下面交替地既

        -ms-box-sizing: border-box; 
            box-sizing: border-box;

但它不能在IE（Internet Explorer）中 。虽然我已经申请box-sizing: border-box; 针对Internet Explorer其与元素的宽度边框和填充的增加。为什么会发生？

应该是什么问题呢？请帮助和sugest我。

注：我使用的是Internet Explorer8和Windows7旗舰版

网页代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MainPage.aspx.cs" Inherits="MainPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="x-ua-compatible" content="IE=8"/>

    <title></title>
    <style type="text/css">
        *
        {
            box-sizing: border-box; /*it gives error:Validation (CSS 2.1): 'box-sizing' is not a known CSS property name. */
            -ms-box-sizing: border-box; 
            -moz-box-sizing: border-box; 
            -webkit-box-sizing: border-box; 
            }
        body
        {
            background: lightblue;
            color: #000000;
            font-family: Trebuchet MS, Arial, Times New Roman;
            font-size: 12px;
        }
        #header
        {
            background: #838283;
            height: 200px;
            width: 1200px;
        }
        #wrapper
        {
            background: #FFFFFF;
            margin: 0px auto;
            width: 1200px;
            height: 1024px;
        }
        #navigation
        {
            background: #a2a2a2;
            float: left;


            margin: 0px 0px;
            width: 1200px;
            height: 25px;
            padding: 3px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="wrapper">
        <div id="header">
            <h1>
                Header goes here</h1>
            <br />
            <h2 style="font-size: 60px;">
                ST ERP by Shanti Technology</h2>
        </div>
        <div id="navigation">
        </div>
    </div>
    </form>
</body>
</html>

Answer 1:

IE8支持的前缀的版本box-sizing ，但与所有的“新”的CSS功能只在标准模式下这样做。 -ms-box-sizing从未使用IE的任何版本。

请确保你的页面有一个DOCTYPE声明触发浏览器的标准模式。你也应该把你的前缀的box-sizing的所有前缀后，他们之前没有，摆脱-ms-box-sizing ，因为它真的没有必要。

Answer 2:

如果您使用的最小宽度或最小高度为好，箱尺寸会被卡在IE8（标准模式）“内容框”，即指定边界框不会有任何效果。

Answer 3:

IE8 +支持盒大小。

支持：

    Opera 8.5+  : box-sizing
    Firefox 1+  : -moz-box-sizing (still prefixed, though some are pushing to have it unprefixed for [Firefox 29][2]).
    Safari 3    : -webkit-box-sizing (unprefixed in modern versions)
    IE8+        : box-sizing

请仔细阅读本的jsfiddle

Answer 4:

箱体尺寸支持IE8 +

你可以看到在这里

Answer 5:

这是因为丢失box-sizing: border-box; -

*{
  box-sizing: border-box;

  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
}

IE不需要供应商特定CSS -ms-box-sizing: border-box; 不需要

小提琴 - http://jsfiddle.net/ctHh3/

Answer 6:

把这个在您的网页，问题就解决了

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

文章来源: box-sizing: border-box => for IE8?