Question

#keyboard {
position: fixed;
background: #eee;
display: none;
border: 1px solid #ccc;
border-radius:7px;
width: 950px;
height: 300px;
padding: 5px;
cursor: move;
background-image:url('BackgroundImage.jpg');
box-shadow: -5px -5px 5px 5px #888; 
-moz-border-radius: -5px -5px 5px 5px #888;
-webkit-border-radius: -5px -5px 5px 5px #888;

}

在上面的css代码中，它可以在Firefox浏览器中使用。但我无法在IE8或IE6上显示阴影和野生动物园。

box-shadow: -5px -5px 5px 5px #888;

请让我知道解决方案。

Answer 1

为IE用户提供类似box-shadow的效果，我通常使用专有的MS过滤器，以下是我的css摘录：

-moz-box-shadow: 2px 4px 19px #333333;
-webkit-box-shadow: 2px 4px 19px #333333;
box-shadow: 2px 4px 19px #333333;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=115, Color='#333333')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=115, Color='#333333');

显然，对IE的影响是不同的，但是使用各种参数，您可以在每个浏览器上获得更接近（或至少可接受）的期望

Answer 2

框阴影是css3，在ie8和旧浏览器中不支持，但我们仍然可以使用css3pie脚本

Answer 3

同时尝试使用prefixr.com，它对于使css3浏览器兼容很有帮助

CSS box-shadow在IE或Safari上无效

3 个答案: