CSS Sprite Display Inline-Block 在 IE 浏览器中显示不正确答案

【问题标题】：CSS Sprite Display Inline-Block Displays Incorrectly with IE BrowserCSS Sprite Display Inline-Block 在 IE 浏览器中显示不正确
【发布时间】：2013-05-30 01:17:34
【问题描述】：

我有一个使用 Sprite 控件和 AJAX 控件创建的网站。

我可以在 Chrome 中运行网站，它看起来就像 JSFIDDLE 版本。

但是，当我转向 IE10 并尝试显示完整的网站时，我的菜单链接会向上和向下移动，而不是从左到右。

在 JSFIDDLE 版本 (http://jsfiddle.net/JjNrb/) 中，我必须删除 AJAX 内容并将 <asp:LinkButton> 控件替换为 <a href="#"> 标记，但这似乎是 ASP.NET 在呈现网页时所做的。

CSS 相当短，没有 Javascript（还），也没有其他 CSS。

是什么让我的页面显示为这样？

【问题讨论】：

浏览器处于什么模式？按 F12 调出开发工具窗口。如果它显示“Quirks mode”或“Compatibility mode”，那么你已经找到了你的问题（或者至少，你发现了一个问题！）。
浏览器模式：IE10 Compat View和文档模式：IE7标准跨度>
该死的。不过，切换到浏览器模式 IE9 后问题就消失了。
如果这发生在您的本地开发系统上（因为它似乎在屏幕截图的地址栏中），则可能是由于 IE 中的设置为本地 Intranet 站点打开了兼容模式。你可能应该把它关掉。请参阅“兼容性视图设置”窗口的“工具”菜单。
是的，这就是我所要做的，@Spudley。

标签： asp.net css visual-studio-2010 internet-explorer

【解决方案1】：

确保您处于标准模式 - 您的页面是否以 ? 开头？

<!DOCTYPE html>

【讨论】：

确实如此，伍迪。严格会伤害什么吗？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
如果您启动 IE10 开发人员工具 (F12)，您应该会看到浏览器模式和文档模式菜单 - 您正在寻找“标准”模式。见en.wikipedia.org/wiki/Quirks_mode。您也可以尝试使用这些菜单将渲染模式转换为标准模式，看看布局问题是否消失 - 如果确实如此，那将是您的问题。
这是我的问题！不过，我不能强迫全世界都按 F12 并进入 IE9 模式。有没有办法让我的 CSS 作为 CSS 1 运行？
将文档类型更改为 HTML 中的“”！