我想box-sizing: border-box为div标签。
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, 但它在元素的宽度中添加了边框和填充。为什么会发生?
box-sizing: border-box;
应该是什么问题?请帮助并向我求婚。
注意: 我使用的是 Internet Explorer8 和 Windows7 Ultimate
页码:
<%@ 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支持的无前缀版本box-sizing,但与所有“新” CSS功能一样,它仅在标准模式下支持。-ms-box- sizing从未被任何版本的IE使用。
box-sizing
-ms-box- sizing
确保您的页面具有doctype声明,以在浏览器中触发标准模式。您还应该将未添加前缀的内容放在所有前缀box-sizing 之后 ,而不是放在前缀 之前 ,并删除它们,-ms-box-sizing因为它实际上是不需要的。
-ms-box-sizing