html - CSS3 在我网站的 IE 中不工作

Question

我真的很难为 Internet Explorer 开发。

下面是一个元素的快照，它在 IE9 中显示，在 Google Chrome 中显示在下方，它在 Firefox 中看起来也一样。

此页面上的某些内容在 IE9 中无法正常工作...

• 导航栏，链接在 IE 中停留在顶部而不是垂直居中
• 导航栏没有应用IE中的框阴影
• 边栏和内容框在 IE 中没有阴影或斜 Angular
• 标签框在 IE 中没有圆边
• 在内容部分，请注意页面右侧的 2 个标签“CSS”和“FONTS”被下推，在 Chrome 版本中它们是对齐的。

该元素不在线，所以我无法显示它，但我已将 header 部分放入此处的 JSSFiddle 页面 http://jsfiddle.net/kenLs/3/embedded/result/您可以看到 header 的这个 JSFiddle 在 IE9 中可以正常工作。

这真的让我感到困惑，它适用于 JSFiddle 但不适用于我的网站。我已经查看了我能想到的一切以使其正常工作。我什至添加了 <meta http-equiv="X-UA-Compatible" content="IE=9" />到我的标题。我的页面上有一些 HTLM5 元素，但我将它们全部替换为常规 div 只是为了使用 IE 进行测试，我所做的一切似乎都没有改变任何这些问题。

IE9 快照

Chrome 快照

---

我知道这很难调试，因为该元素不在线，但如果您知道为什么会发生这种情况，我真的很想知道。

---

更新

我刚刚意识到，在那个 JSFiddle 上，如果我关闭兼容性 View ，那么即使是标题也会看起来像我图片中的那个

我还添加了另一个简单的 JSFiddle 测试，它只有我的标签的代码，即使这个小代码在 IE 中也不能正常工作，我必须打开兼容模式才能工作，否则 Angular 是方形的 http://jsfiddle.net/j9Qe3/1/

Answer 1

如果它在 jsfiddle 中有效，但在您的网站上无效，我想知道您是否使用了文档类型，或者是否在文档类型之前放置了任何会使 IE 进入怪癖模式的内容。