☰

IE11 错误地呈现具有边框半径的元素

tag-icon • tag-icon windows-8.1 css internet-explorer-11
IE11 错误地呈现具有边框半径的元素

我的 Internet Explorer 11.0.13 错误地呈现了所有具有正边框半径的 css 元素：它在组件上显示对角线和阴影区域，有时使其难以辨认。这种情况发生在所有页面上。如果我将这些元素的边框半径设置为 0，它们就会正确呈现。以下是显示 Google 主页上的问题的屏幕截图。

在此处输入图片描述

我关闭了 GPU 渲染，但这并没有解决问题。有人可以提出其他解决方案吗，或者至少告诉我这种现象叫什么，以便我可以搜索它？

我在 HP 840G 上使用 Windows 8.1 Pro。

2015 年 1 月 10 日添加：

以下是一个小例子：

<!DOCTYPE html>
<html>
<head><style>
div {
    width: 50px;
    height: 50px;
    background-color: black;
}
</style></head>
<body>
<div style="border-radius:0px"></div><br>
<div style="border-radius:5px"></div><br>
<div style="border-radius:10px"></div><br>
<div style="border-radius:25px"></div>
</body>
</html>

呈现如下： 在此处输入图片描述

答案1

这是 IE11 中的一个错误，Microsoft Connect 中多次提到过该错误，但微软似乎并未理解它。

我已经能够通过在标题中添加以下行来恢复正确的显示：

<meta http-equiv="X-UA-Compatible" content="IE=10" />

这会使 IE11 进入 IE10 兼容模式，其中 border-radius 可以正确显示：

图像

答案2

禁用 IE11 的兼容性视图可能会有所帮助：

  1. Alt+T或设置（齿轮图标）
  2. 选择Compatibility View Settings
  3. 取消Display intranet sites in Compatibility View选中复选框
  4. 重启 IE11

更多详情，请参阅文章 修复：CSS border-radius 在 Internet Explorer 11 中不起作用。

答案3

尝试清除缓存。

进入 IE 并按ctrl+ shift+ delete。

然后勾选/取消勾选以下框，如图所示。

点击此

然后等待它删除所有这些文件（可能需要一两分钟），完成后刷新页面。

答案4

将 Windows 8 升级到 Windows 10 后，我在 IE 11、Edge 和 Firefox 57.0（64 位）中遇到了同样的问题。最终更新显卡驱动程序解决了该问题。

相关内容