【问题标题】:IE9 border-radius shorthand not supported?不支持 IE9 边框半径简写?
【发布时间】:2011-07-16 07:50:50
【问题描述】:

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

border-radius: 7px;

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

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

【问题讨论】:

    标签: internet-explorer-9 css


    【解决方案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;
    
    【解决方案3】:

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

    (见http://jsfiddle.net/wJd2h/ 证明)

    IE9 也支持 :last-child。

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

    编辑:我查看了您的来源。改变 &lt;meta http-equiv="X-UA-Compatible" content="IE=8" /&gt; 到 &lt;meta http-equiv="X-UA-Compatible" content="IE=9" /&gt;

    【讨论】:

    • 感谢您的建议。我当然希望是这样。明天我将尝试元标记。如果这也是关于 :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)
          猜你喜欢
          • 2011-11-14
          • 2011-07-19
          • 2012-07-02
          • 1970-01-01
          • 2012-04-08
          • 2012-06-02
          • 1970-01-01
          相关资源
          最近更新 更多