box-sizing: border-box => for IE8?

html internet-explorer css internet-explorer-8

56,571

Solution 1

IE8 supports the unprefixed version of box-sizing, but as with all "new" CSS features it only does so in standards mode. -ms-box-sizing has never been used by any version of IE.

Make sure your page has a doctype declaration to trigger standards mode in browsers. You should also place your unprefixed box-sizing after all the prefixes, not before them, and get rid of -ms-box-sizing as it's really not needed.

Solution 2

If you are using min-width or min-height as well, box-sizing will be stuck as "content-box" in IE8 (Standards mode), i.e. specifying border-box will have no effect.

Solution 3

IE8+ supports box-sizing.

Support:

    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

Solution 4

box-sizing supports IE8+

you can see here

Solution 5

You are missing box-sizing: border-box; -

*{
  box-sizing: border-box;

  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
}

IE Does not require vendor specific CSS -ms-box-sizing: border-box; is not needed

Fiddle - http://jsfiddle.net/ctHh3/

View more solutions

56,571

Author by

Pritesh

Updated on July 10, 2022

Comments

Pritesh almost 2 years

i want box-sizing: border-box for div tag.

For Mozila Firefox i have tried

        -moz-box-sizing: border-box;

For IE(Internet Explorer) i have tried both of below alternatively

        -ms-box-sizing: border-box; 
            box-sizing: border-box;

but it couldn't works in IE(Internet Explorer). Though i have apply box-sizing: border-box; for Internet Explorer it adds with of border and padding in width of element. why does it happen?

what should be the problem? please help and sugest me.

NOTE: i am using Internet Explorer8 and Windows7 ultimate

PAGE CODE:

<%@ 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>

Pritesh almost 12 years

this is the doctype declared on my page==> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
BoltClock almost 12 years

Can I see your page? There must be something else causing the issue.
Pritesh almost 12 years

See code ...and for navigation id i have applied padding: 3px; which add into the width of the element on which i applied navigation id NOTE: this issue in IE8.
BoltClock almost 12 years

I don't see any box-sizing in your code. I've already mentioned that IE8 supports the unprefixed version - have you tried placing it in your actual code to see if it works?
Pritesh almost 12 years

i got following Error:- Validation (CSS 2.1): 'box-sizing' is not a known CSS property name.
RAN almost 12 years

I can't see box-sizing in your code. use box-sizing: border-box; in that and try again.
RAN almost 12 years

box-sizing property is in CSS3 that why you got the Validation error.
Rob W almost 12 years

@Pritesh box-sizing was not defined in CSS2.1 - dev.w3.org/csswg/css3-ui/#box-sizing.
Mark Amery over 10 years

-1; the claim that the box-sizing property is unprefixed in modern versions of Firefox is false, even today. Version 26, the latest version as of the date I'm posting this, still doesn't support the unprefixed box-sizing property, a year and a half after this answer was posted.
Adrien Be over 9 years

@RDX jsFiddle is nice BUT it does not support IE8 (only in draft mode anyway). So for IE8, one might use this jsbin.com/nuzayivuroyu/1 (you could add this link to your answer)
Adrien Be over 9 years

@BoltClock it seems like IE is having trouble with apply box-sizing: border-box; correctly. see this example on a modern browser & then on IE8 jsbin.com/nuzayivuroyu/2/edit?html,css,output . EDIT: it seems to be because of the min-width property, if you change it by with, it then works fine in IE8, see jsbin.com/vapasehiziku/1/edit?html,css,output
BoltClock over 9 years

@Adrien Be: How did you even manage to get JS Bin to work on IE8?
Adrien Be over 9 years

@BoltClock oh oh, actually I tested those example on jsBin without the CSS & HTML panel shown. So the URLs become jsbin.com/nuzayivuroyu/2/ and jsbin.com/vapasehiziku/1/
BoltClock over 9 years

@Adrien Be: Ah. I just noticed the arrow at the corner of the preview pane which takes me to that those URLs.
Adrien Be over 9 years

Warning: min-width & max-width not working with box-sizing: border-box; is a known bug in IE8 and Firefox 16&below. see stackoverflow.com/questions/9508262/…
BoltClock over 9 years

@Adrien Be: Ha, I commented on that question before... I should have known better. Thanks for your findings.
Adrien Be over 9 years

@BoltClock hehe, I guess we humans have a finite memory :) You're welcome! maybe you can update your answer?
PTD over 8 years

This is the answer that solved my issue - min-height on my elements was causing border-box to fail in IE8. Hopefully this answer will be voted up in due course as it deserves more prominence (for those of us who are still saddled with IE8 support at least...)