不支持 IE9 边框半径简写？

Posted 2023-03-06

【中文标题】不支持 IE9 边框半径简写？

【英文标题】：IE9 border-radius shorthand not supported?

【发布时间】：2011-07-16 07:50:50

【问题描述】：

我过去制作的一些东西具有这样的border-radius属性：

border-radius: 7px;

这在 IE9 中不起作用。我以为 IE9 应该支持边界半径？如果您需要示例，请参阅this site。页面右侧的所有框都应具有弯曲的边框。它适用于 Chrome 和 Firefox...

在另一个烦人的、不相关的注释中，我今天发现 IE9 不支持 :last-child 伪类。到目前为止真是令人难以置信的失望......

【参考方案1】：

你有没有加入这个：

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

见this thread。

【讨论】：

哇，我什至没有想到这一点。我无法再访问我链接的那个网站，但明天我会在我目前正在从事的项目中尝试这个。随着 IE9 的发布，这个标签还需要吗？

【参考方案2】：

是的，这个答案是正确的，但是作为相关的旁注，IE9 目前不支持与渐变过滤器结合使用的边框半径。

在费心搜索类似问题之前，花了一个小时尝试完成这项工作。

// This is the filter code for a gradient in IE (6-9) along with a border radius
//THIS DOES NOT WORK
//You have to use one or the other, you could use javascript for rounded corners and then use the gradient if you wish    

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bcdd68', endColorstr='#355e0b',GradientType=0 ); /* IE6-9 */

/*border radius*/
 -khtml-border-radius:5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

【讨论】：

You can use SVG to produce the gradient in IE9; this plays nicely with border-radius.

【参考方案3】：

IE9 确实支持边框半径，甚至是简写。我不确定为什么它不能在您的网站上运行，但它是受支持的。

（见http://jsfiddle.net/wJd2h/ 证明）

IE9 也支持 :last-child。

也许您使用的是旧的 HTML 文档类型？

编辑：我查看了您的来源。改变 <meta http-equiv="X-UA-Compatible" content="IE=8" /> 到 <meta http-equiv="X-UA-Compatible" content="IE=9" />

【讨论】：

感谢您的建议。我当然希望是这样。明天我将尝试元标记。如果这也是关于 :first-child 的唯一问题，那肯定很棒......

【参考方案4】：

更好......

<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

这取自出色的 HTML5 重置模板

【参考方案5】：

IE9 确实支持浏览器半径，但如果您在本地站点或本地文件上工作，您应该确保 浏览器模式 和 文档模式 是对的。要检查它，请按 F12，然后检查 de 值（请参见图片）。 例如，如果 Document Mode 设置为 Quirks Mode（这是默认设置）并且您没有指定html 文档上的文档模式，IE9 可能将此文档解释为 IE7 文档，因此半径不起作用。但是，如果您将 Document Mode 设置为 IE9 标准，您会在输入端看到一个漂亮的半径。

请看图http://moodle.org/pluginfile.php/115/mod_forum/post/843271/IE9-F12.jpg

我希望这可以帮助您解决半径问题。 :)

这篇文章这么长。

【讨论】：

这个答案可能非常接近事实，但不准确。怪癖模式不是默认模式，除非页面写得不好。您可能指的实际默认值是 IE7 兼容模式，它在某些机器上设置为“本地 Intranet”（包括本地主机）站点的默认值。这确实会打破边界半径（以及许多其他事情），但它与怪癖模式有很大不同。

【参考方案6】：

我不是专家，但我什么时候使用

<meta http-equiv="X-UX-Compatible" content="IE=edge,chrome=1"> or even
<meta http-equiv="X-UA-Compatible" content="IE=9" />

W3C 验证

Dreamweaver CS5.5 中的检查器将其踢回，并说明以下内容

“错误值 X-UA-Compatible for attribute http-equiv on element meta. [HTML5]”

【参考方案7】：

如果您在 Mac 上使用 VMWare Fusion，则可能是 VM 存在问题。见IE9 Rendering elements with opacity, border-radius or cufon

【参考方案8】：

好的，我搜索了谷歌并找到了这个。事实上，你不需要对你的代码做任何事情，请检查你的IE9是否打开了“兼容性视图”。

【讨论】：

你是对的。它不起作用的原因是因为我有一个针对 IE8 的标签。完全删除它使其工作（以及保留我拥有的标签但将目标更改为 IE9）