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？

回答

相关问题