встроенный блок в режиме совместимости с IE9

В настоящее время я разрабатываю меню html/css. Моя проблема заключается в том, что страница, на которую будет вставлено меню, при загрузке заставляет браузер переходить в режим причуд и совместимости. Я не могу контролировать это.

Вот мой 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;
}

Моя проблема заключается в том, что встроенный блок в причудах IE и режиме совместимости заставляет меню занимать всю ширину своего родительского div.

Вот как выглядят элементы div в Chrome и Firefox:

В IE те же div расширяются до полной ширины родительского div.

Чего я пытаюсь добиться, так это центрированных div, размер которых изменяется с текстовым содержимым, которое при изменении размера браузера автоматически смещается вниз.

Я нашел некоторый код из другого вопроса SO, который показывает мою проблему здесь при просмотре в IE в режиме совместимости и особенностей.

После комментария Spudley вот картинка, показывающая режим загрузки по умолчанию.

Несмотря на то, что он говорит IE8, конечный результат тот же, что и в IE9. Сегодня на другом компе :)