Internet explorer 在ie8标准兼容模式下调整css盒大小_Internet Explorer_Css_Internet Explorer 8

Internet explorer 在ie8标准兼容模式下调整css盒大小

internet-explorer css internet-explorer-8

Internet explorer 在ie8标准兼容模式下调整css盒大小,internet-explorer,css,internet-explorer-8,Internet Explorer,Css,Internet Explorer 8,我知道internet explorer传统上通过在总框宽中包含填充和边框宽度来实现css框大小“错误”。IE8+在符合标准模式下呈现页面时“修复”此框大小调整，并使用-ms box size属性实现CSS3框大小调整但这里有一些有趣的事情。以下代码使用不同的宽度+填充+边框+方框大小组合呈现几个div： <html> <head> <style type="text/css"> div { margin-bott

我知道internet explorer传统上通过在总框宽中包含填充和边框宽度来实现css框大小“错误”。IE8+在符合标准模式下呈现页面时“修复”此框大小调整，并使用-ms box size属性实现CSS3框大小调整

但这里有一些有趣的事情。以下代码使用不同的宽度+填充+边框+方框大小组合呈现几个div：

<html>
<head>
    <style type="text/css">
        div { margin-bottom: 1em; background-color: #5555e9; }
        
        #test1 { width: 500px; }
        #test2 { width: 500px; padding: 10px; }
        #test3 { width: 500px; padding: 10px; border: 5px solid red; }
        #test4 { width: 500px; padding: 10px; border: 5px solid red;
            -ms-box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div id="test1">Hello World!</div>
    <div id="test2">Hello World!</div>
    <div id="test3">Hello World!</div>
    <div id="test4">Hello World!</div>
</body>


div{页边距底部：1em；背景色：#5555e9；}
#test1{宽度：500px；}
#test2{宽度：500px；填充：10px；}
#test3{宽度：500px；填充：10px；边框：5px实心红色；}
#test4{宽度：500px；填充：10px；边框：5px实心红色；
-ms框尺寸：边框框；
-moz框大小：边框框；
-webkit框大小：边框框；
框大小：边框框；
}
你好，世界！
你好，世界！
你好，世界！
你好，世界！

在IE8怪癖模式下，所有DIV以相同的500px宽度输出，正如IE对盒子大小的怪癖计算所预期的那样：

但如果我添加以下doctype声明以在IE8标准符合性模式下呈现：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

输出如下：

请注意，最后一个长方体与第三个长方体的尺寸相同，即使使用css将“长方体大小”属性设置为“四面八方边框长方体”。我真的希望IE8在符合标准的模式下使用border box方法，但是考虑到这个测试，我不知道如何实现它。有人有什么建议吗？

在标准模式下，它遵循正确的盒子模型

---------------------------------------------
|  margin                                   |
|  ---------------------------------------  |
|  |Border                               |  |
|  |  ---------------------------------- |  |
|  |  |padding                         | |  |
|  |  | -----------------------------  | |  |
|  |  | |Content                     | | |  |
|  |  | |____________________________| | |  |
|  |  |________________________________| |  |
|  |_____________________________________|  |
|___________________________________________|

CSS中的宽度和高度会影响标准模式下内容区域的宽度和高度，以及在怪癖模式下边框框的宽度和高度。

在标准模式下，它遵循正确的框模型

---------------------------------------------
|  margin                                   |
|  ---------------------------------------  |
|  |Border                               |  |
|  |  ---------------------------------- |  |
|  |  |padding                         | |  |
|  |  | -----------------------------  | |  |
|  |  | |Content                     | | |  |
|  |  | |____________________________| | |  |
|  |  |________________________________| |  |
|  |_____________________________________|  |
|___________________________________________|

CSS中的宽度和高度会影响标准模式下内容区域的宽度和高度，以及在“怪癖”模式下边框框的宽度和高度。

感谢Knyri的回答：

问题是我的IE8浏览器实例默认为在IE7标准模式下渲染，而不是在IE8模式下渲染。（IE7不支持CSS3框大小调整。）我可以通过强制页面在IE8标准符合模式下呈现来解决这个问题。我将以下内容添加到我的html头标记中：

        <meta http-equiv="x-ua-compatible" content="IE=8"/>

除了title和其他meta标记外，它必须位于html head标记中的其他标记之前。这将导致以下渲染：

如您所见，前三个框使用内容框大小（W3C标准）渲染，第四个框使用边框框渲染，因为它是使用CSS显式设置的。

感谢Knyri的回答：

        <meta http-equiv="x-ua-compatible" content="IE=8"/>

除了title和其他meta标记外，它必须位于html head标记中的其他标记之前。这将导致以下渲染：

如您所见，前三个框使用内容框大小（W3C标准）渲染，第四个框使用边框框渲染，因为它是使用CSS显式设置的。

感谢您的回答。但是，我应用的最后一个框-ms框大小：边框框如何？我希望它遵循边框框模型，而不是内容框（这是标准）。从我在各种来源上读到的信息来看，IE8应该支持框大小属性，但在标准模式下似乎没有。当我在IE8浏览器模式和IE8标准文档模式下运行IE9时，它工作正常。如果您不知道，请在IE中点击F12以获得漂亮的开发人员工具，尽管缺少。我主要用它来看看我的页面在IE的不同版本中是如何呈现的！当我使用开发工具时，我发现我的页面默认为IE7标准模式！当我将它改为IE8时，它工作正常。我熟悉开发人员工具，但不熟悉切换模式的能力。谢谢谢谢你的回答，克尼里。但是，我应用的最后一个框-ms框大小：边框框如何？我希望它遵循边框框模型，而不是内容框（这是标准）。从我在各种来源上读到的信息来看，IE8应该支持框大小属性，但在标准模式下似乎没有。当我在IE8浏览器模式和IE8标准文档模式下运行IE9时，它工作正常。如果您不知道，请在IE中点击F12以获得漂亮的开发人员工具，尽管缺少。我主要用它来看看我的页面在IE的不同版本中是如何呈现的！当我使用开发工具时，我发现我的页面默认为IE7标准模式！当我将它改为IE8时，它工作正常。我熟悉开发人员工具，但不熟悉切换模式的能力。谢谢