IE9兼容性怪癖模式中的内联块

Question

我目前正在开发一个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的全部宽度。

下面是Chrome和Firefox中div的样子：

​

​

在IE中，相同div扩展到父div的全宽

​

​

我试图实现的是居中div，它随文本内容调整大小，当浏览器调整大小时，这些文本内容会自动下推。

我从另一个SO问题中发现了一些代码，当在兼容和怪癖模式下使用IE查看时，它们显示了我的问题here。

在Spudley的评论之后，这里是一张图片，显示了它加载的默认模式。

​

​

尽管它显示为IE8，但在IE9中，最终结果是相同的。在今天的不同pc上:)

Answer 1

"display: inline-block;“最好更改为：{ float:left|right；diplay:inline；zoom:1；}

Answer 2

当我需要在old and quirks IE中模拟inline-block时，我只是将inline-block替换为inline。(带条件注释)