box-sizing：border-box => for IE8？

我想box-sizing: border-box爲div標記。box-sizing：border-box => for IE8？

對於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它在元素的寬度上添加了邊框和填充。爲什麼會發生？

應該是什麼問題？請幫助並消化我。

注：我使用互聯網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>

來源

2012-07-23 Pritesh

驗證錯誤是無關緊要的 - 'box-sizing'是CSS3的一部分，而不是CSS2.1。如果您真的關心驗證，請注意，前綴不會針對任何版本的CSS進行驗證。 – BoltClock 2012-07-23 08:11:11

我可以更改CSS版本嗎？ – Pritesh 2012-07-23 08:14:01

你檢查了我的答案嗎？ -ms-box-sizing：border-box;不需要 – Dipak 2012-07-23 08:15:24

IE8支持box-sizing的前綴版本，但與所有「新」CSS功能一樣，它只在標準模式下才能這樣做。任何版本的IE都沒有使用過-ms-box-sizing。

確保您的頁面具有doctype聲明來觸發瀏覽器中的標準模式。您還應該在之前將所有前綴放在前綴前面，而不是之前，並且擺脫-ms-box-sizing，因爲它確實不是必需的。

來源

2012-07-23 07:49:03 BoltClock

這是在我的頁面上聲明的文檔類型==><！DOCTYPE html PUBLIC「 - // W3C // DTD XHTML 1.0 Transitional // EN」「http://www.w3.org/TR/xhtml1/DTD/xhtml1 -transitional.dtd「> – Pritesh 2012-07-23 07:51:07

我可以看到你的頁面嗎？肯定還有別的東西會導致這個問題。 – BoltClock 2012-07-23 07:52:06

查看代碼...併爲'navigation'我已經應用了'padding：3px;'它將添加到我應用'navigation' id的元素的寬度注意：這個問題在IE8中。 – Pritesh 2012-07-23 07:58:47

箱尺寸支持IE8 +

你可以看到here

來源

2012-07-23 07:48:06

直到IE8，它支持IE8 + – 2012-07-23 07:49:04

雅我的答案意思是這個IE8 +反正thnks ......... – 2012-07-23 07:50:51

我得到以下錯誤： - \t'驗證（CSS 2.1）：'框大小'不是已知的CSS屬性名稱「。 – Pritesh 2012-07-23 08:05:10

你缺少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;不需要

小提琴 - http://jsfiddle.net/ctHh3/

來源

2012-07-23 07:58:04 Dipak

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

Please review this jsFiddle

來源

2012-07-23 07:59:29 RAN

我已經嘗試過IE8 +：box-sizing，但它不起作用 – Pritesh 2012-07-23 08:02:23

我在代碼中看不到'box-sizing'。使用'box-sizing：border-box;'然後再試一次。 – RAN 2012-07-23 08:05:14

再次查看更新的代碼...非常感謝您回覆 – Pritesh 2012-07-23 08:09:45

把這個在您的網頁，問題就解決了

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

來源

2015-02-28 03:42:00

如果您使用的最小寬度或最小高度爲好，箱在IE8（標準模式）中，大小將被卡住爲「內容框」，即指定邊框不起作用。

來源

2015-04-16 13:48:08 Webdotnet

這是解決我的問題的答案 - 我的元素的最小高度導致邊框 - 盒在IE8中失敗。希望這個答案在適當的時候會被投票，因爲它值得更加重視（對於我們這些仍然揹負IE8支持的人來說......） – PTD 2015-08-26 13:32:31

box-sizing：border-box => for IE8？

回答

相關問題