IE浏览器无法正确显示盒子阴影和边框圆角效果。

Question

IE浏览器无法正确显示盒子阴影和边框圆角效果。

3

我希望您能够翻译以下内容：在Windows 8.1 64位的IE 11上，我遇到了一个非常奇怪的错误。在设置了border-radius的div上的box-shadow与没有设置任何border-radius的div上的box-shadow不同。（示例：）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.switchbtn1.first {border-right:none;border-radius:4px 0 0 4px;}
.switchbtn1.last {border-left:none;border-radius:0 4px 4px 0;}
.switchbtn1 {
  font-size:14px;
  line-height:14px;
  padding:3px 15px 6px;
  border:1px solid #E8BA66;
  float:left;
  box-shadow: 0px 3px 7px rgba(227, 168, 79, 0.6);
}
</style>
</head>

<body>  
  <div class="switchbtn1 first">un</div>
  <div class="switchbtn1">deux</div>
  <div class="switchbtn1 last">trois</div>        
</body>
</html>

这将导致：

enter image description here

您可以看到，带有圆角的div的box-shadow与没有圆角的div的box-shadow不同...

这个bug并不会在所有的IE11上出现。例如，在Windows 7上的IE11上似乎不会出现。

有什么想法吗？

- zeus

1

你尝试过使用HTML5文档类型 - <!DOCTYPE html> 和 <meta http-equiv="X-UA-Compatible" content="IE=edge">吗？ - Vucko

我尝试了，但不幸的是它没有改变任何东西。 - zeus

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alex Wilson · Answer 1

此解决方案适用于IE11

div {
   -moz-border-radius: 10px; /* Firefox */
   -webkit-border-radius: 10px; /* Safari, Chrome */
   -khtml-border-radius: 10px; /* KHTML */
    border-radius: 10px; /* CSS3 */
   -webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);
   -moz-box-shadow:    4px 4px 5px 0px rgba(50, 50, 50, 0.75);
   box-shadow:         4px 4px 5px 0px rgba(50, 50, 50, 0.75);
   background:rgba(50, 50, 50);
}

- CupawnTae · Answer 2

与此相关？http://social.technet.microsoft.com/Forums/en-US/e262c912-5250-4996-acbc-41a8bcd11ba0/weird-ie-behavior-when-combining-drop-shadow-and-radius-css?forum=ieitprocurrentver

答案表明这是一个图形驱动程序问题：

我在高级选项中关闭了 GPU 渲染，在我重新启动后，带有阴影半径的元素显示正常...