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

Question

我网站的菜单现在在 IE 中运行异常，而以前是正常的。我将网站的文件移动到公司网络共享，现在它无法正确显示 CSS。 CSS 应该添加边框半径/圆 Angular 边缘，它的 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 hacks对于 border-radius，它们不会呈现。 (box-shadow 和border-radius 都是IE9+)

这就是为什么您的网站应该遵循 graceful-degradation 的理念.您应该进行调试，以便定位和堆叠 (z-index) 按照设计的方式工作，但小的视觉效果可能会消失。