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

Question

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>

The validation error is irrelevant - `box-sizing` is part of CSS3, not CSS2.1. If you really care about validation, notice that the prefixes won't validate against any version of CSS either. — BoltClock, Jul 23 '12 at 08:11
did you check my answer? -ms-box-sizing: border-box; is not needed — Dipak, Jul 23 '12 at 08:15
Visual Studio lets you validate against CSS3. See http://stackoverflow.com/questions/3931801/is-it-possible-to-change-css-validation-scheme-in-vs2010 and http://stackoverflow.com/questions/4810401/css-3-0-in-visual-studio-2010 — BoltClock, Jul 23 '12 at 08:15

BoltClock · Accepted Answer · 2012-07-23T08:13:40.357

32

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.

edited Jul 23 '12 at 08:13

answered Jul 23 '12 at 07:49

BoltClock

700,868
160
1,392
1,356

this is the doctype declared on my page==> – Pritesh Jul 23 '12 at 07:51
Can I see your page? There must be something else causing the issue. – BoltClock Jul 23 '12 at 07:52
1

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. – Pritesh Jul 23 '12 at 07:58
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? – BoltClock Jul 23 '12 at 08:02
@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 http://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 http://jsbin.com/vapasehiziku/1/edit?html,css,output – Adriano Aug 22 '14 at 10:27
@Adrien Be: How did you even manage to get JS Bin to work on IE8? – BoltClock Aug 22 '14 at 10:32
@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/ – Adriano Aug 22 '14 at 10:35
@Adrien Be: Ah. I just noticed the arrow at the corner of the preview pane which takes me to that those URLs. – BoltClock Aug 22 '14 at 10:37
Warning: `min-width` & `max-width` not working with `box-sizing: border-box;` is a known bug in IE8 and Firefox 16&below. see http://stackoverflow.com/questions/9508262/min-height-min-width-doesnt-respect-box-sizing-in-some-browsers – Adriano Aug 22 '14 at 10:43
@Adrien Be: Ha, I commented on that question before... I should have known better. Thanks for your findings. – BoltClock Aug 22 '14 at 10:44
@BoltClock hehe, I guess we humans have a finite memory :) You're welcome! maybe you can update your answer? – Adriano Aug 22 '14 at 11:04

score 10 · Answer 2 · answered Apr 16 '15 at 13:48

10

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.

answered Apr 16 '15 at 13:48

Webdotnet

131
1
3

1

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...) – PTD Aug 26 '15 at 13:32

score 5 · Answer 3 · edited Jan 07 '14 at 17:31

5

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

edited Jan 07 '14 at 17:31

ewanm89

919
5
22

answered Jul 23 '12 at 07:59

RAN

1,443
3
19
30

1

I can't see `box-sizing` in your code. use `box-sizing: border-box;` in that and try again. – RAN Jul 23 '12 at 08:05
`box-sizing` property is in CSS3 that why you got the Validation error. – RAN Jul 23 '12 at 08:43
-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. – Mark Amery Dec 18 '13 at 14:28
@RDX jsFiddle is nice BUT it does not support IE8 (only in draft mode anyway). So for IE8, one might use this http://jsbin.com/nuzayivuroyu/1/ (you could add this link to your answer) – Adriano Aug 22 '14 at 09:06

score 2 · Answer 4 · edited Jul 23 '12 at 07:51

2

box-sizing supports IE8+

you can see here

edited Jul 23 '12 at 07:51

BoltClock

700,868
160
1,392
1,356

answered Jul 23 '12 at 07:48

Shailender Arora

7,674
2
31
35

i got following Error:- `Validation (CSS 2.1): 'box-sizing' is not a known CSS property name`. – Pritesh Jul 23 '12 at 08:05
1

@Pritesh `box-sizing` was not defined in CSS2.1 - http://dev.w3.org/csswg/css3-ui/#box-sizing. – Rob W Jul 23 '12 at 09:22

Dipak · Answer 5 · 2012-07-23T09:06:22.110

1

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/

edited Jul 23 '12 at 09:06

answered Jul 23 '12 at 07:58

Dipak

11,930
1
30
31

score 0 · Answer 6 · answered Feb 28 '15 at 03:42

0

put this in your page, problem solved

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

answered Feb 28 '15 at 03:42

Fu-Han Zhang

75
1
1
6

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

6 Answers6

Linked