CSS 菜单在 IE10 兼容模式下无法正常工作

Question

我的网站的菜单现在在 IE 中表现得很奇怪，以前还不错。我将该站点的文件移动到公司网络共享，现在它无法正确显示 CSS。 CSS 应该添加边框半径/圆角边缘，它的 z-indexes 使其位于其他 div 的顶部，等等，并且在移动之后它不再这样做了。如果我在 IE 中按 f12 并选择 IE10 - 不是 IE10 兼容性 - 它确实可以正常加载。

我的 CSS 中有什么需要修复的地方吗？

    height:41px;
background: #fff;
background-color: #000000;
-moz-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
-webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
background: #565656;
background: -moz-linear-gradient(#565656 0%, #323232 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #323232));
background: -webkit-linear-gradient(#565656 0%, #323232 100%);
background: linear-gradient(#565656 0%, #323232 100%);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;

Answer 1

IE10 兼容模式模拟 IE7，它支持几乎没有使用的 css3 属性。除非你开始使用像this one 这样的IE hack 来处理border-radius，否则它们不会呈现。 （box-shadow和border-radius都是IE9+）

这就是为什么您的网站应该遵循graceful-degradation 的理念。您应该进行调试，以便定位和堆叠 (z-index) 按设计工作，但可能会出现小问题。