IE9 兼容怪癖模式下的 inline-block答案

【问题标题】：inline-block in IE9 compatibility quirks modeIE9 兼容怪癖模式下的 inline-block
【发布时间】：2023-12-31 23:33:01
【问题描述】：

我目前正在开发一个 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 中的样子：

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

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

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

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

虽然它说的是 IE8，但最终结果在 IE9 中是一样的。今天在不同的电脑上:)

【问题讨论】：

你能发布一个工作示例吗？ HTML 会很方便。
IE 的问题在于 quirks 模式使用的是较旧的渲染引擎，它不知道 inline-block 之类的东西。没有办法解决这个问题。为什么不能使用标准合规模式？
您可以控制 IE 兼容模式。将X-UA-Compatible: IE=edge HTTP 响应标头添加到您的服务器设置，或添加<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 元素以拒绝切换到兼容性视图模式。
我的代码将被添加到我无法控制的网页中。我也无法控制随响应发送的 http 标头。
那么你将如何添加代码呢？当然，如果您能够添加东西，您可以添加元元素或 DOCTYPE 声明？

标签： html css internet-explorer quirks-mode

【解决方案1】：

"显示：内联块；"最好改变： { 浮动：左|右；显示：内联；缩放：1； }

【讨论】：

【解决方案2】：

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

【讨论】：

我想过这一点，但是当我使用内联声明时，边距和填充声明被忽略，结果菜单元素在跳转到新行时重叠。