inline-block in IE9 compatibility quirks mode

Question

I am currently developing a html/css menu. My issue is that the page that the menu will be inserted in, when loaded, causes the browser to go into quirks and compatibility mode. I cannot control this.

Here is my css:

.community-menu {    
    margin: 5px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 15px 30px;
    cursor: pointer;
}

#container {
    width: 100%; 
    position: relative;
    text-align: center;
}

My issue is that inline-block in IE quirks and compatibility mode causes the menus to take up full width of its parent div.

Here is what the divs look like in Chrome and Firefox:

Chrome and Firefox rendering of inline-block

In IE the same divs expand to full width of parent div

IE rendering of inline-block

What I am trying to achieve is centred divs that resize with text contents that as the browser resizes are automatically pushed down.

I found some code from another SO question that shows my issue here when viewed with IE in compatibility and quirks mode.

Following a comment by Spudley here is a pic to show the default mode it loads in.

enter image description here

Even though it says IE8, the end result is the same in IE9. On different pc today :)

The problem with IE is that quirks mode uses an older rendering engine, which does not know about things like inline-block. There is no way around that. Why can you not use standards compliance mode? — Mr Lister
You can control IE compatibility mode. Add X-UA-Compatible: IE=edge HTTP response header to your server settings, or add <meta http-equiv="X-UA-Compatible" content="IE=edge" /> element to deny switching to compatibility-view mode. — Marat Tanalin
My code is to be added to a webpage over which I have no control. I also have no control over the http headers sent with the response. — Bruno
But how will you be adding the code then? Surely if you're able to add stuff, you can add meta elements or a DOCTYPE declaration? — Mr Lister

Foker Foker · Accepted Answer · 2013-06-03T11:02:21

"display: inline-block;" better to change on: { float:left|right; diplay:inline; zoom:1; }

inline-block in IE9 compatibility quirks mode

2 Answers