2

我目前正在开发一个 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 怪癖和兼容模式中的 inline-block 会导致菜单占据其父 div 的整个宽度。

这是 div 在 Chrome 和 Firefox 中的样子：

内联块的 Chrome 和 Firefox 渲染

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

inline-block 的 IE 渲染

我想要实现的是居中的 div，它使用文本内容调整大小，当浏览器调整大小时会自动下推。

我从另一个 SO question 中找到了一些代码，当使用 IE 在兼容性和怪癖模式下查看时，这些代码在这里显示了我的问题。

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

在此处输入图像描述

尽管它说的是 IE8，但最终结果在 IE9 中是相同的。今天在不同的电脑上:)

4

2 回答 2

2

“显示：内联块；” 最好改变： { float:left|right; 显示：内联；缩放：1；}

于 2013-06-03T11:02:21.537 回答
0

当我需要在 olds and quirks IE 中模拟 inline-block 时，我只需将 inline-block 替换为 inline。（有条件评论）

于 2013-06-03T10:59:17.720 回答