Question

如果您查看this page上的主导航菜单，您会看到我在a：上使用投影，但是，在IE9中阴影是错误的 - 它并不总是显示，并且经常悬停后不再有效。我想修复它，或者只在IE中删除阴影。

我的css是：

    #menu a {
  color:#fff;
  padding-top:10px;
  padding-right:10px;
  padding-left:10px;
  text-decoration:none;



}

#menu a:hover {

 background:#e58f56;
 border-top: 0px solid transparent;
 border-bottom: 10px solid transparent;
 border-left: 10px solid #bbb2b1;
 border-right: 0;
 border-top-right-radius:5px;
 border-bottom-right-radius:5px;
-webkit-box-shadow: #888 4px 4px 4px;
-moz-box-shadow: #888 4px 4px 4px;
box-shadow: #888 4px 4px 4px;



}

有什么想法吗？

Answer 1

我刚把你的代码放到js小提琴上，它在IE9中运行良好！必须与'pie'修复您的呼叫有关。也许尝试删除它并进行检查。

你正在尝试的效果肯定是在IE9中“做得好”..不要放弃:)！

Answer 2

你确定阴影根本没有显示吗？ IE9的box-shadow实现使模糊处理的距离大约是其他浏览器的一半（我实际上发布了一个关于here的问题）。对于低值，IE9的渲染可能非常轻微，您可能没有注意到它。就像测试一样，尝试将模糊半径设置得更大，以确定它是否显示在IE9中。

Answer 3

如果您没有看到DropShadow，可能是您的IE9处于兼容性视图模式。尝试在页面中明确设置与IE9的兼容性，例如：

<meta http-equiv="X-UA-Compatible" content="IE=8; IE=9; IE=10; IE=11" />

在你的页面标题中，在调用任何Css之前。

在IE9中删除Shadow bug

3 个答案: