Html box-sizing: border-box => 对于 IE8？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11608291/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
box-sizing: border-box => for IE8?
提问by Pritesh
i want box-sizing: border-boxfor divtag.
我想box-sizing: border-box为div标签。
For Mozila Firefoxi have tried
对于Mozila Firefox我已经尝试过
-moz-box-sizing: border-box;
For IE(Internet Explorer)i have tried both of below alternatively
对于IE（Internet Explorer），我已经尝试了以下两种方法
-ms-box-sizing: border-box;
box-sizing: border-box;
but it couldn't works in IE(Internet Explorer).
Though i have apply box-sizing: border-box;for Internet Explorerit adds with of border and padding in width of element. why does it happen?
但它不能在IE(Internet Explorer) 中工作。虽然我已经申请 box-sizing: border-box;了Internet Explorer，但它在元素宽度上添加了边框和填充。为什么会发生？
what should be the problem? please help and sugest me.
应该是什么问题？请帮助和建议我。
NOTE:i am using Internet Explorer8and Windows7 ultimate
注意：我使用的是Internet Explorer8和Windows7 Ultimate
PAGE CODE:
页面代码：
<%@ 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>
回答by BoltClock
IE8 supports the unprefixed version of box-sizing, but as with all "new" CSS features it only does so in standards mode. -ms-box-sizinghas never been used by any version of IE.
IE8 支持无前缀版本的box-sizing，但与所有“新”CSS 功能一样，它仅在标准模式下支持。-ms-box-sizing从未被任何版本的 IE 使用过。
Make sure your page has a doctype declaration to trigger standards mode in browsers. You should also place your unprefixed box-sizingafterall the prefixes, not beforethem, and get rid of -ms-box-sizingas it's really not needed.
确保您的页面具有 doctype 声明以在浏览器中触发标准模式。您还应该将 unprefixed 放在所有前缀box-sizing之后，而不是放在它们之前，并删除-ms-box-sizing它，因为它确实不需要。
回答by Webdotnet
If you are using min-width or min-height as well, box-sizing will be stuck as "content-box" in IE8 (Standards mode), i.e. specifying border-box will have no effect.
如果您同时使用 min-width 或 min-height，则在 IE8（标准模式）中 box-sizing 将被卡为“content-box”，即指定 border-box 将不起作用。
回答by RAN
IE8+ supports box-sizing.
IE8+ 支持 box-sizing。
Support:
支持：
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
回答by Dipak
You are missing box-sizing: border-box;-
你不见了box-sizing: border-box;——
*{
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
IE Does not require vendor specific CSS -ms-box-sizing: border-box;is not needed
IE 不需要供应商特定的 CSS-ms-box-sizing: border-box;不需要
Fiddle- http://jsfiddle.net/ctHh3/
回答by Fu-Han Zhang
put this in your page, problem solved
把它放在你的页面上，问题解决了
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
