内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用
我想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资源管理器它在元素的宽度上加上边框和填充。为什么会发生这种事?
问题应该是什么?请帮帮我。
IE8和IE7。
页码:
<%@ 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使用过。
确保您的页面有一个doctype声明以触发浏览器中的标准模式。