首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >框大小调整: IE8的边框=>?

框大小调整: IE8的边框=>?
EN

Stack Overflow用户
提问于 2012-07-23 15:45:15
回答 6查看 56.4K关注 0票数 20

我想要用于div标签的box-sizing: border-box

对于Mozila Firefox,我已经尝试过了

代码语言:javascript
复制
        -moz-box-sizing: border-box; 

对于IE(Internet Explorer),我已经尝试了下面两种方法

代码语言:javascript
复制
        -ms-box-sizing: border-box; 
            box-sizing: border-box;

但它不能在IE(IE)中工作。虽然我已经为Internet Explorer应用了box-sizing: border-box;,但它添加了元素的边框和填充宽度。为什么会发生这种情况?

应该是什么问题呢?请帮帮我,向我求婚。

注意:我使用的是 Explorer8Windows7 ultimate

页面代码:

代码语言:javascript
复制
<%@ 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>
EN

回答 6

Stack Overflow用户

回答已采纳

发布于 2012-07-23 15:49:03

IE8支持box-sizing的无前缀版本,但与所有“新”CSS特性一样,它只在标准模式下才支持。-ms-box-sizing从未被任何版本的IE使用过。

确保您的页面具有在浏览器中触发标准模式的doctype声明。您还应该将无前缀的box-sizing放在所有前缀之后,而不是放在它们之前,并去掉-ms-box-sizing,因为它实际上并不需要。

票数 32
EN

Stack Overflow用户

发布于 2015-04-16 21:48:08

如果您同时使用最小宽度或最小高度,则框大小在IE8 (标准模式)中将被固定为“内容框”,即指定边框将不起作用。

票数 10
EN

Stack Overflow用户

发布于 2012-07-23 15:59:29

IE8+支持框大小调整。

支持:

代码语言:javascript
复制
    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

票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/11608291

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档