For visibility of [Lukx's comment], the real answer is to set `position:relative` on the iframe itself, since you might not have the ability to edit the html source page or it might need to use relative positioning.

Just add this CSS and you should be all set:



    iframe {
        position: relative;
    }

I wrote up a full description of the problem in [this answer][my answer]

[Lukx's comment]: https://stackoverflow.com/questions/11191155/iframe-content-doesnt-show-in-ie8#comment31508114_11205602
[my answer]: https://stackoverflow.com/a/23817415/1366033

I have a site with an iFrame.

The host page has some very basic JS on it, the iframed page has simple JS too.

When I embed the iframe as usualy: `<iframe src="iframeURL" width="900" height="1000"></iframe>` it works fine in all browsers but IE8.

I tried various things:

- first: disabling all JS
- removing src attribute and adding it with JS
- using `<object>` instead
- I used proxy.php to make the content appear as if it were coming from the same domain

It doesn't work in IE8 regardless what I do.

The funny thing is that I can open the page I want to iframe in a separate tab and works just fine.

If I change the src attribute to "some_other_random_page_from_internet" it works.

The other thing is that both host and iframe use postMessage to communicate and I can see the communication is working OK, it's just the content which doesn't show, but when I inspect the page source with developers tools I can see the content is there.

Is it possible that the content of the iframe causes issues? It's a basic HTML + basic JS, with JS disabled it shouldn't be an issue.

Any ideas what else I could check?

PS. I can't show the code (NDA , etc)

iFrame content doesn't show in IE8

This is actually an issue in all browsers <sup>(that I've tested)</sup>

**Here's a screenshot** - *I added a grey border so it's easier to tell that it's not lining up*.

[![screenshot][screenshot]][fiddle-demo]

## [Here's a demo that reproduces the issue][fiddle]

The issue occurs when the [**inline form**][inline form] is on a screen that is larger than `768px`.

Particularly, the thing that messes up the alignment is from this [line of forms.less][forms.less] (which was introduced with [this commit][float commit]):



    float: none;

Naively, setting this value back to `float: left` seems to fix the problem, but I'm not sure what other issues may arise.  



    @media (min-width: 768px) {
        .form-inline .radio input[type="radio"], 
        .form-inline .checkbox input[type="checkbox"] {
            float: left;
            margin-right: 5px;
        }
    }

### [Here's a working version of your code with these changes][original code]

Other than that, you'd just have to tweak the CSS

[fiddle]: http://jsfiddle.net/KyleMit/m3RHG/1/
[fiddle-demo]: http://jsfiddle.net/KyleMit/m3RHG/1/show/light/

[screenshot]: http://i.imgur.com/SmFVJAF.png

[inline form]: http://getbootstrap.com/css/#forms-inline
[forms.less]: https://github.com/twbs/bootstrap/blob/master/less/forms.less#L452
[float commit]: https://github.com/twbs/bootstrap/commit/a82ca0f9e1711b32f7c07e23ea1e23dd253cd21e#diff-57a5fbf005ecc202d1e7e08c11f73b93

[original code]: http://jsfiddle.net/gn9Up/2/

In both chrome and firefox:

- `form-inline` causes the label to be shifted downwards and the space between the checkbox and the label is narrower than when using `form-horizontal`.
- `form-horizontal` displays perfectly



### [Here's a demo in jsFiddle][fiddle]

### Here's some code:



    <form class="form-inline">
        <div class="checkbox">
            <label>
                <input type="checkbox"/> Test againn
            </label>
        </div>
    </form>

**Here's a screenshot:**

![screenshot][screenshot]




[screenshot]: http://i.imgur.com/JEJ1HYn.png
[fiddle]: http://jsfiddle.net/gn9Up/

Is there a way to make the checkboxes all aligned correctly in both browsers or am I missing something?

Bootstrap 3 form checkbox label doesn't align with checkbox input in Chromium + Firefox

My guess is there is an issue with the way that [IcoMoon](https://icomoon.io/) created the font files.

I'm having trouble rendering in Chrome, IE, and FF (respectively):

![Render](http://i.imgur.com/hHY1qnj.png)

It appears the font is being delivered to the site okay:

![Network](http://i.imgur.com/cGqSsOs.png)

Here are the relevant portions of your [CSS file][myCSS], which wouldn't hurt to include in the question:



    @font-face {
        font-family: 'vt-icons';
        src: url('fonts/vt-icons/fonts/vt-icons.eot?ovc75f');                                      /* IE9 Compat Modes */
        src: url('fonts/vt-icons/fonts/vt-icons.eot?#iefixovc75f')    format('embedded-opentype'), /* IE6-IE8 */
             url('fonts/vt-icons/fonts/vt-icons.woff?ovc75f')         format('woff'),              /* Modern Browsers */
             url('fonts/vt-icons/fonts/vt-icons.ttf?ovc75f')          format('truetype'),          /* Safari, Android, iOS */
             url('fonts/vt-icons/fonts/vt-icons.svg?ovc75f#vt-icons') format('svg');               /* Legacy iOS */
    }
    [class^="icon-"], [class*=" icon-"] {
        font-family: 'vt-icons';
    }
    
    .icon-vt-logo-solid:before {
        content: "\e600";
    }
    .icon-study: before {
        content: "\e601";
    }

If you try another `content` type like `"\e601"`, it works fine.  So I'm guessing it's the build for that specific item.

You can confirm this by downloading a font-viewer like [FontForge] and opening the [.woff file][myFont]:

![Fonts](http://i.imgur.com/1OHcGsP.png)

It shows the same problem, so it's unlikely to be the browser.

If you double click on the icon, you'll see the exact vectors used to create it:

![VT Original](http://i.imgur.com/leAO1vS.png)

What's happening is that the circle and the VT logo are both rendered on the "fore" layer.  Everything inside the circle is filled in, rendering the "VT" fill invisible.  You easily see this by changing the shape of the circle and seeing the VT come out from "behind" it.

![VT New](http://i.imgur.com/dB7BbcU.png)

I'm not sure what the difference in circles was, but the twitter circle seems to be properly cancelling out the inner shapes.  So you can copy and paste that circle into your other icon to get this:

![Twitter & VT](http://i.imgur.com/0YGMhZ9.png)

Then just export and upload to your host

Just for good measure, I saved the changes, exported some of the relevant font files, and [added them to GitHub][Github] so you can download them.

Until you add to your own host, this'll work:



    @font-face {
        font-family: 'vt-icons';
        src: url('http://www.corsproxy.com/kylemitofsky.com/libraries/libraries/fonts/vt-icons.woff?ovc75f') format('woff');
        unicode-range: U+E600-E626;
    }

### Working Version! Yay!

![Working Version](http://i.imgur.com/UTR5HYG.png)

>**By the way**, You can also try adding a unicode-range for `@font-family` declarations so the browser only needs to download the characters it absolutely needs, like this: `unicode-range: U+E600-E626;`


### Further Reading

* http://css-tricks.com/snippets/css/using-font-face/
* https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face
* http://fontforge.github.io/en-US/

[myCSS]: http://d25wzyo6b5ic8t.cloudfront.net/rev/d557aa69/new/myvoice/css/myvoice-dark.css
[myFont]: http://d25wzyo6b5ic8t.cloudfront.net/rev/d557aa69/new/myvoice/css/fonts/vt-icons/fonts/vt-icons.woff?ovc75f
[FontForge]:http://fontforge.github.io/en-US/
[Github]: https://github.com/KyleMit/libraries/commit/5fbb591e0ff15ee0dba4a42ae27d325d0ac52986?diff=unified

I created a couple icon fonts with [**IcoMoon**](https://icomoon.io/). 

They work fine in all other browsers but some reason they are completely opaque in all versions of IE tested (8-11). Bootstrap's icon fonts look fine so it's something I must be doing or not doing.

You can see it in the upper left corner here: http://voicethread.com/new/myvoice/#browse

How it looks in different browsers:

![How it looks in Chrome, FF, Safari, and IE](http://i.imgur.com/EdTujwl.png)
