[英]box-sizing: border-box => for IE8?
我想要box-sizing: border-box
div
標簽的box-sizing: border-box
。
對於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,它在元素的寬度上添加了邊框和填充。 為什么會這樣?
應該是什么問題? 請幫助和消化我。
注意:我使用的是Internet Explorer8和Windows7終極版
頁面代碼:
<%@ 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
的box-sizing
,但與所有“新”CSS功能一樣,它只在標准模式下這樣做。 任何版本的IE從未使用-ms-box-sizing
。
確保您的頁面具有doctype聲明以在瀏覽器中觸發標准模式。 您還應該在所有前綴之后放置未加前綴的box-sizing
,而不是在它們之前 ,並且除去-ms-box-sizing
因為它實際上並不需要。
如果你也使用最小寬度或最小高度,在IE8(標准模式)中,盒子大小將被卡在“內容盒”中,即指定border-box將不起作用。
IE8 +支持盒子大小調整。
支持:
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
box-sizing支持IE8 +
你可以在這看到
您缺少box-sizing: border-box;
-
*{
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
IE不需要供應商特定的CSS -ms-box-sizing: border-box;
不需要
把它放在你的頁面,問題解決了
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.