schepp / box-sizing-polyfill

A CSS box-sizing: border-box polyfill for IE 6/7

Preface and Credits

This box-sizing polyfill is based on previous work done by Erik Arvidsson, which he published in 2002 on WebFX.

Since there were some edge/heavy usage cases where it broke I started pushing it further. And since the original was not aware of IE8 I also added feature-detection for box-sizing, to do nothing when detected positive.

During that I also borrowed dimension measuring techniques from Dean Edwards' IE7.js script.

Usage

Add the behavior/HTC after every box-sizing: border-box; that you assign:

box-sizing: border-box; *behavior: url(/scripts/boxsizing.htc);

If you prefix the behavior property with a star, like seen above, it will only be seen by IE6 & IE7, not by IE8+ (it's a hack) which is better for the performance on those newer browsers.

The URL to the HTC file must be relative to your HTML(!) document, not relative to your CSS. That's why I'd advise you to use absolute paths like in the example.

Please make sure to check your server configuration and update it to use the correct content-type if needed. You can do this in a .htaccess file:

AddType text/x-component .htc

box-sizing-polyfill's Issues

Messes with my list items

Having a strange issue where initially my list style markers were being hidden (discs for ul's and numbers for ol's) when the polyfill takes effect. They appear again if you set the position to inside and the new model makes them actually makes them sit outside of the text wrap. Then the markers were aligned to the bottom of the list item so I added vertical-align: middle and kind of got what I was after in the end. Maybe this will help someone in a similar predicament.

Syntax error when trying to load with Modernizr

The star hack is simple, but we are using Modernizr to handle polyfills as a matter of policy. Fortunately, HTML5 Please suggests using Modernizr to load this polyfill as needed. Unfortunately, doing so throws a syntax error in JS on IE7.

The Modernizr intelligence is quite basic:

Modernizr.addTest("boxsizing",function(){
    return Modernizr.testAllProps("boxSizing") && (document.documentMode === undefined || document.documentMode > 7);
});
Modernizr.load([
    {
        test: Modernizr.boxsizing,
        nope: '/path/jto/boxsizing.htc'
    }
]);

The syntax error thrown by the above suggests the problem could be with the XML, but removing the XML (and renaming the file as a .js) produces a different syntax error (related to the element object).

Is this a bug? Or can anyone point to a successful implementation of this polyfill using Modernizr?

TIA

For security reasons, framing not allowed - error in IE7

http://mirs.org.uk/dev/test.html

This is my test page - it contains a VERY simple bootstrap 3 template, with container and two columns, span 6 each. There is a link to a bootstrap-ie7.css stylesheet that contains a reference boxsizing.htc.

When I load this page in IE7 - with the link to the bootstrap-ie7.css file included - the page loads, then I get a series of error messages reading "For security reasons, framing is not allowed'. I get 3 errors, then the page displays - but not correctly: the last column always wraps. It does this on the very simple templae and other more complex layouts.

If I edit the bootstrap-ie7.css file to break the link to the boxsizing.htc file, this problem does not occur.

Can anyone shed any light on this, please?

mark

Elements resize on click/focus

I am applying the box layout model to all elements (as outlined here http://paulirish.com/2012/box-sizing-border-box-ftw/) and then use the polyfill like so:

.ie.seven * {behavior: url(boxsizing.htc);}

It is now the second time I have come across the issue of elements resizing width-wise on click/focus. Removing the padding from the element fixes this.

box break when resize the window

Hi,
Iam using box-sizing-polyfill with zen theme , but when i resize the window the columns break.. and i need to refresh the window again to fix it..

anyway to fix that..
Thanks

Error in IE7 when hitting F5

When a page containing an element using boxsizing in IE7 loads, there's no errors showing, but once hitting F5 the following error shows up in the console (IE9 in IE7 mode)

SCRIPT65535: Unexpected call to method or property access. boxsizing.htc, line 99 character 4

Not sure what this is, but I'll report it even thought the script is still initialized and working (except from another bug I'll file separately)

ie7 buttons

This is a brilliant bit of work - but just stumbled into my first issue in ie7. It doesnt seem to work on buttons? Any ideas?

Fails in conjunction with focus/blur Javascript.

Been trying to debug why this fails horrendously on a website I'm building and come up with the following:

The case I've applied it to is a form, the inputs of which are wrapped in LIs (in an OL, of course), and I'm able to add certain classes such as 'share' to put two inputs on one line responsively. Great.

Our form inputs have border-color and box-shadow changes on hover and focus, giving the user some feedback, and when applying those styles to elements in IE7 with border-box and this polyfill, the widths of the items seem to be recalculated and they're shrunk every time you hover or focus - making the whole thing unusable.

Are there any suggestions? If not I'd have to go through all of my CSS and say 'don't do this for IE7, don't do that for IE7, don't use the placeholder plugin for IE7 (that also triggers this resize on focus)' etc.

EDIT: I'll see if I can get a test page up and running for it after work. Spent so long adding and removing things I need to get it back to the bare code.

Applying to all crashing IE7 on XP

Hi!

I'm encountering an issue with the boxsizing fix. When applied to all elements using * { ... } IE7 is crashing. If I apply to only one element that uses box sizing it will render fine. The more I add it to the slower the browser gets until it crashes.

I can't replicate the issue using IEtester or forcing IE to render in IE7 mode on windows 7. Can only see it happen on windows XP with IE7.

I also ran the same tests on another project using the fix and found the same issue. The only thing the two had in common was they use zurb's foundation. Also, I ran the test on a VM box outside of our network with same results.

I'm still trying to work toward a solution but hoping someone here may be able to offer assistance trouble shooting and coming to a solution.

Thanks!

box-sizing fix with csswizardry grid

I'm using box-sizing-polyfill with the csswizardry grid.
Since you replaced
borderLeft with borderLeftWidth (same for right, top, bottom of course) it's not working correctly anymore.

CSS3PIE

I have tried using this solution to provide a fall-back for ie 7 reference box-sizing: borderbox.

The results are interesting. Certainly this works well on some elements , but often still requires further tweaking and does not alter the behavior of select items in ie 7 that do not have an option to add padding and height etc.

My main bug bear is that it does not seem possible to use this with css3pie, or at least not using multiple .htc files/behaviors on one element.. Not sur ebut this may be a limitation of using .htc files rather than this specific library/plugin.

boxsizing.htc causes page elements in IE7 to shrink

I have been experiencing a problem with page elements in IE7 shrinking inward from left and right when I use boxsizing.htc for border-box sizing of my float-based layouts.

Here is a similar report: Strange interaction with box-sizing-polyfill when window resized

(Sorry about all the closing and reopening of my issue. I thought the polyfill was working and then it wasn't.)

Bower component.json

Can a component.json file be added for Bower compatibility?

boxsizing.htc with handlebar.js raise error in IE7

This is very rare,

When using boxsizing.htc with handlebar.js 1.0.0 beta 6 (pre-compile/compile) on the same page, it will raise Force Close error in IE7 when user click an anchor tag or refresh page.

Which take me to disable one of them on my website.

Any hints to fix this ? I suspect some libraries out there also causing the same error too.

Thanks

When open modal window (by Bootstrap 3) that contains [.col-*-*] elements then they are look abnormal.

Example (open in the browser IE7): http://demo.bekliev.ru/_ie/

When window of browser is resizing (when the modal window is visible) then the column blocks become visible.

I think: if show a hidden element (it happens only with Bootstrap modals), that contains [.col-xs|sm|md|lg-*] elements then their width will be 0 pixels.

A long time I was trying to fix this problem, but I can't fix it.
And I used next solution by Damien Alexandre (from 2013/10/09): #36 (comment), but it didn't help me.

Very slow on scroll

The latest version is veeery slow in IE7 when scrolling, and can prevent it from responding.
Not sure if something in particular triggers this or if it's just the counterpart of recent enhancements, but it is not usable as is anymore.
This is a critical issue.

width: auto problems

I was having a bear of a time getting this to work with the http://github.com/zurb/foundation 3.0 grid, and the problem was that rows were margin: 0 auto and width: auto; Managed to correct it by setting a defined width for the .row element (width: 1000px) but still giving it a max-width of 100% so it'll scale down to a min-width. Tricky little thing to resolve, but seems to be behaving now. Very cool @Schepp

Floats

Hi,
I installed the htc file, and it appears to be doing something, since my IE7 page layout changed in Browserstack and IE Tester.

Question: Is there an issue with floats? When I have floated items before a table: without htc file, the table was more than 100% width. With htc, layout gets wonky and table is less than 100% width. I had clear:both placed on the table.

If you've encountered this before, is there a fix?
Thanks!

Doesn't get applied in IE9 running in IE7 mode.

When I run IE9 in IE7 mode, the box-model doesn't work and the layout breaks.

file needs version numbers

It's hard to reference a boxsizing.htc version when we don't know which commit it belongs to.
That would be useful in order to know which version different sites use, or submit issues about a specific version.
Would it be possible to add a version number in the file itself ?

Conflict with other resizing scripts

The current version of boxsizing.htc doesn't allow other scripts to change the dimensions of an element.
Would it be possible for it not to do any resize if the element has inline styling specifying dimensions (eventually when using !important) ?

Conflict with ie8.js

This seems to conflict with IE8.js, in IE7 (at least). You can see it working until IE8.js kicks in then it seems to break.

I know IE8.js is supposed to support box-sizing anyway but that doesn't seem to work with percentages.

Is there anyway we could fix this? Perhaps adding this to IE8.js instead of the current box-sizing fix on there?

Cheers, awesome fix btw! :)
~evu.

box-sizing large width on ie7

When page loads all elements on page have huge width, it's like box-sizing polyfill doubles the width of elements.

Auto margins

Hello, thanks for this! It seems to be working, apart from it seems to cancel out margin:0 auto;

Do you know of any issues with that?

Thanks

Box-sizing improperly sets dimensions when elements are width: 100% with display: none

This is related to a common JS problem, where an element's dimensions are un-fetchable while it is detached from the DOM from display: none or similar.

In our case, inputs with width: 100% get a width of practically zero as the parent container is display:none when the shim executes on page load. If the page resizes, or otherwise triggers the box-sizing.htc shim after being shown (when its width appears to be around zero), it pops into its normal place fine. If we have the element invisible but still in flow on page load, it works fine when eventually shown, but ideally we don't want the element in the flow.

I am honestly not sure of the best solution here, as AFAIK the dimension data is simply unavailable, but I thought I would start an issue so that others can be aware of this potential gotchya. It may very well be that it is outside of the shim's control and such DOM's or procedures must be changed instead.

This behavior does not occur in IE8+, Chrome, FF or Safari - it appears to be related entirely to the dimensions.

Add minimized version

The script in boxsizing.htc looks to mostly be JavaScript. Couldn't we apply minimization to those parts of the file to improve front-end performance like other JS libraries?

I've never tried this on an IE-specific behavior script, but I don't see why it shouldn't work.

Directory and Subdirectory of boxsizing.htc

I would like to start off and say, I appreciate the work going into the box-sizing-polyfill.

One thing I am having issues with is that I have html files in subfolders and unless I put the boxsizing.htc in every folder, the behavior does not work using absolute or relative url in my css file.

Is there another way to point to the boxsizing.htc so I don't have to add it to every subdirectory?

Thanks.

This PR broke box-sizing for percentages

9804a75

Testing it every way I know how and it consistently breaks box-sizing for percentages. Not sure what edge case the author was trying to solve but I don't think breaking all percentage width box-sizing for it is a good trade.

Doesn't run on initial page load

I'm using this polyfill to make Bootstrap 3 look not terribly wretched in IE7. My issue is that it doesn't seem to run on page load. If I clear my cache and reload the page, or if I resize the page, it runs and the page looks good. But when I navigate to another page the layout is broken again until I either do a clear-cache refresh or resize the window.

My development site isn't accessible worldwide so I can't give you a functioning URL to test. But any tips on how I might debug it / fix it would be greatly appreciated.

Thanks in advance!

-JB Christy, Web Developer, Stanford University

Doesn't work at all for me

Not sure if I'm doing something wrong, or if a code problem.
I'm running IE9 and when I put it in Browser Mode: IE7, nothing happens to correct the box sizing.

My file structure is: /ebe_simplified/js/libs/boxsizing.htc
My css files have the following after any box-sizing declaration: *behavior: url(ebe_simplified/js/libs/boxsizing.htc);

Problems when using max-width for container element

I'm trying to use box-sizing-polyfill in a fluid grid. The code looks somewhat like this:

<style>
.region {
width:100%;
max-width:978px;
}

.block {
float:left;
}

.grid-1-3 {
width: 33.32%;
}
</style>

<div class="region">
<div class="block grid-1-3"></div>
<div class="block grid-1-3"></div>
<div class="block grid-1-3"></div>
</div>

When boxsizing.htc runs, suddenly the width of a block isn't 1/3 of 978px but 1/3 of 100%. So on a 1920x1080 monitor the block is ~640px wide instead of the 326 that it should be (=1/3 of 978).

IE 7 Crashes

because of the lines (71 and 72):

element.runtimeStyle.width = "";
element.runtimeStyle.height = "";

ie 7 crashes when refreshing the page using internet explorer 7, or when click on a link on the page htc is loaded. Not sure the correct way to fix this, you can reproduce this by refreshing a page that has boxsizing.htc is loaded, then try again by commenting out those two lines and you will notice it will not crash.

Can't load it

I can load it with a hard url like http://foo.com/js/boxsizing.htc, but when I try to load it with /js/boxsizing.htc or any combination of the name and path parameters, it doesn't load.

It literally only ever works if I hard-code the URL for it in.

Right now it lives in http://example.com/js/vendor/boxsizing.htc

The stylesheet that calls it lives in http://example.com/css/styl/style_styl.css

Any idea how I can get this working? I'm at my wit's end.

input[type="text"] element resizes after blur in IE7 Mode on IE9

I previous posted this issue as a float issue, but I tested some more and found that it has to do with the width and height. Once I set !important behind width and height, it stops resizing. display:inline/block doesn't seem to have anything to do with the issue as first anticipated.

Here's some tests to reproduce:

Will resize:

input {
    float:left;
    padding:0 0 0 10px;
    vertical-align:middle;
    border:0;
    line-height:30px;
    width:250px;
    height:30px;
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
    *behavior: url(boxsizing.htc);
}

Will not resize:

input {
    float:left;
    padding:0 0 0 10px;
    vertical-align:middle;
    border:0;
    line-height:30px;
    width:250px !important;   // Note the !important rule is added
    height:30px !important;   // Note the !important rule is added
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
    *behavior: url(boxsizing.htc);
}

parentWidth when parent is TD with currentStyle.width:auto

Is

parentWidth = getPixelWidth(object.parentElement,(object.parentElement.currentStyle.width != "auto" ? object.parentElement.currentStyle.width : "100%"));

correct when object.parentElement is a TD? Isn't it wrong to assume that a TD with currentStyle.width:auto is 100% wide?, as in this example where the TD with currentStyle.width:auto is not 100% but instead the size of another TD in the same column.

Thanks!

IE7 crash with box-sizing-polyfill and respond.js

I'm working with a Bootstrap 3 site that needs to support IE 7. It seems that if I include both respond.js with the polyfill I see IE using 100% CPU and ever increasing amounts of memory.

If I exclude either one of the scripts the issue doesn't occur.

Does anyone have any idea what might be happening?

Thanks.

[enhancement] Add missing bower.json.

Hey, maintainer(s) of Schepp/box-sizing-polyfill!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library Schepp/box-sizing-polyfill is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "Schepp/box-sizing-polyfill",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

IE7 Invalid argument, unexpected call to method or property access.

I keep getting spammed with errors in IE7.

The page loads broken, then starts flickering between the working boxsizing version and the broken one. Every 0.5 seconds it shows me a working version, then goes back to broken.

I get the following error in IE7 (IE9 on IE7 mode, since the error message in IE7 tell me nothing useful at all.)

SCRIPT87: Invalid argument. 
boxsizing.htc, line 374 character 2

Line 374 is the line below which starts with element...

function setBorderBoxMinHeight(n){
        element.runtimeStyle.minHeight = Math.max(0, n - getBorderTopWidth() -
        getPaddingTop() - getPaddingBottom() - getBorderBottomWidth()) + "px";
}

I also, sometimes, get the following error:

SCRIPT65535: Unexpected call to method or property access.
boxsizing.htc, line 323 character 2

These lines:

function getBoxSizing(){
var s = element.style;
var cs = element.currentStyle
if(typeof s.boxSizing != "undefined" && s.boxSizing != ""){
    return s.boxSizing;
}
if(typeof s["box-sizing"] != "undefined" && s["box-sizing"] != ""){
    return s["box-sizing"];
}
if(typeof cs.boxSizing != "undefined" && cs.boxSizing != ""){
    return cs.boxSizing;
}
if(typeof cs["box-sizing"] != "undefined" && cs["box-sizing"] != ""){
    return cs["box-sizing"];
}
return getDocumentBoxSizing();
}

I'm testing this with the latest version of boxsizing.htc.