Very Strange IE7 Bug

Question

I have a Bootstrap 3/WordPress site I am working on and I've included a few poly-fills to get everything to work smoothly. I found out that they need IE7 compatibility so I am trying to get it to work as best I can.

For the most part it's performing very nicely.

However when I re-size the browser or if I use a redirect, elements on the page frantically blink because they appear to be removed then added in fractions of a second.

the site is here:

wp.jamesendres.com

I have no idea what is causing this and I've tried using modernizr, although this is my first time actually using it. I have tried changing my elements from HTML5 to HTML4 elements and no luck.

I'm using IE7 in a virtual machine running Windows XP Pro x64.

edit: I've narrowed it down to the boxsizing.htc file. More specifically the behavior property. So pretty much the thing that fixes the box-sizing is causing the spastic actions. Hmm now to see if I can fix this.

Answer 1

So for some reason or another it was the padding. I made a stylesheet specifically for IE7 that has:

*{padding:0 !important}

Then I manually went through the website and re-styled each element with my own padding and none of Bootstraps (in that IE7.css file). It works now and there's no crazy flashing or anything and I'm feeling good.

If anyone else comes across a similar problem I put this in my header:

<!--[if lt IE 8]>
    <link href="<?php echo get_template_directory_uri(); ?>/css/bootstrap-ie7.css" rel="stylesheet">
    <link href="<?php echo get_template_directory_uri(); ?>/css/ie7.css" rel="stylesheet">
<![endif]-->

It's a lot of tedious work and I hate IE except 11 isn't that bad. Unfortunately my client's building is still using IE7 so I had to unwillingly support it.

Answer 2

The answer is quite straightforward.

Bootstrap 3 does NOT support IE 7. Read this (in section "IE7, We Hardly Knew Ye"). Consider to use bootstrap3-ie7.

Last, stop using IE7 if you can. It was a product in October 2006.