box-sizing：border-box =>为IE8？ [英] box-sizing: border-box => for IE8?
问题描述
我想要 box-sizing：border-box 为 div 标签。
对于 Mozilla Firefox ，我尝试过
-moz-box-sizing ：border-box;
对于 IE（Internet Explorer），我已尝试过以下两种/ p>
-ms-box-sizing：border-box;
box-sizing：border-box;
，但无法在 IE（Internet Explorer）
虽然我已经为 Internet Explorer 应用 box-sizing：border-box; ，它添加了元素宽度的边框和填充。为什么会发生？
应该是什么问题？ 我使用 Internet Explorer8 strong>
页码：
<％@ Page Language =C＃AutoEventWireup =trueCodeFile =MainPage.aspx.csInherits =MainPage％&
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://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-compatiblecontent =IE = 8/>
< title>< / title>
< style type =text / css>
*
{
box-sizing：border-box; / *它给出错误：验证（CSS 2.1）：'box-sizing'不是一个已知的CSS属性名称。 * /
-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; $ b $ p padding：3px;
}
< / style> ;,
< / head>
< body>
< form id =form1runat =server>
< div id =wrapper>
< div id =header>
< h1>
标题在这里< / h1>
< br />
< h2 style =font-size：60px;>
ST ERP by Shanti Technology< / h2>
< / div>
< div id =navigation>
< / div>
< / div>
< / form>
< / body>
< / html>
IE8支持非前缀版本 box-sizing ，但是对于所有的新CSS特性，它只在标准模式下这样做。 -ms-box-sizing 从未被任何版本的IE使用。
确保您的网页有doctype声明在浏览器中触发标准模式。您还应该在所有前缀之后放置前缀框大小 ，而不是之前 code> -ms-box-sizing ，因为它真的不需要。
i want box-sizing: border-box for div tag.
For Mozila Firefox i have tried
-moz-box-sizing: border-box;
For IE(Internet Explorer) i have tried both of below alternatively
-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 Explorer it adds with of border and padding in width of element. why does it happen?
what should be the problem? please help and sugest me.
NOTE: i am using Internet Explorer8 and 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>
IE8 supports the unprefixed version of box-sizing, but as with all "new" CSS features it only does so in standards mode. -ms-box-sizing has never been used by any version of IE.
Make sure your page has a doctype declaration to trigger standards mode in browsers. You should also place your unprefixed box-sizing after all the prefixes, not before them, and get rid of -ms-box-sizing as it's really not needed.
这篇关于box-sizing：border-box =>为IE8？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
