【问题标题】:Round Corners in IE10 default modeIE10默认模式下的圆角
【发布时间】:2013-05-19 03:05:00
【问题描述】:

我一直在尝试使用 IE 10 中的默认设置显示圆角不想更改文档模式和浏览器模式:

我也尝试过使用来自不同供应商的 .htc,例如 css3pie.com、round-border.htc 等,但没有结果:

   <style>
.curved {
 -moz-border-radius:0px 0px 5px #999;
 -webkit-border-radius:0px 0px 5px #999;
 behavior: url(border-radius.htc);
 border-radius:0px 0px 5px #999;
 -khtml-border-radius: 0px 0px 5px #999;
 width: 1000px;
    margin: 30px auto;
border-radius: 20px;
        padding-left: 10px;
    padding-right: 10px;

    padding: 0; 
    overflow: hidden;
}
</style>

HTML 代码:

<body>

<div class="curved">
fdhsajk fhdas fhkdsja fhdksj fhdksja fhsdkja fhkdaj fhajks hdfdhsajk fhdas fhkdsja fhdksj fhdksja fhsdkja fhkdaj fhajks hdfdhsajk fhdas fhkdsja fhdksj fhdksja fhsdkja fhkdaj fhajks hdfdhsajk fhdas fhkdsja fhdksj fhdksja fhsdkja fhkdaj fhajks 
hdfdhsajk fhdas fhkdsja fhdksj fhdksja fhsdkja fhkdaj fhajks hdfdhsajk fhdas fhkdsja fhdksj fhdksja fhsdkja fhkdaj fhajks hdfdhsajk fhdas fhkdsja fhdksj fhdksja fhsdkja fhkdaj fhajks hdfdhsajk fhdas fhkdsja fhdksj fhdksja fhsdkja fhkdaj
 fhajks hdfdhsajk fhdas fhkdsja fhdksj fhdksja fhsdkja fhkdaj fhajks hd
fdhsajk fhdas fhkdsja fhdksj fhdksja fhsdkja fhkdaj fhajks hdfdhsajk fhdas fhkdsja fhdksj fhdksja 
fhsdkja fhkdaj fhajks hdfdhsajk fhdas fhkdsja fhdksj fhdksja fhsdkja fhkdaj fhajks hdfdhsajk fhdas fhkdsja fhdksj fhdksja fhsdkja fhkdaj fhajks hdfdhsajk fhdas fhkdsja fhdksj fhdksja fhsdkja fhkdaj fhajks hd
fdhsajk fhdas fhkdsja fhdksj fhdksja fhsdkja fhkdaj fhajks hdfdhsajk fhdas fhkdsja fhdksj fhdksja 
fhsdkja fhkdaj fhajks hdfdhsajk fhdas fhkdsja fhdksj fhdksja fhsdkja fhkdaj fhajks hdfdhsajk fhdas fhkdsja fhdksj fhdksja fhsdkja fhkdaj fhajks hd
fdhsajk fhdas fhkdsja fhdksj fhdksja fhsdkja fhkdaj fhajks hdfdhsajk fhdas fhkdsja fhdksj fhdksja
 fhsdkja fhkdaj fhajks hdfdhsajk fhdas fhkdsja fhdksj fhdksja fhsdkja fhkdaj fhajks hdfdhsajk fhdas fhkdsja fhdksj fhdksja fhsdkja fhkdaj fhajks hd
</div>

但还是没有运气... 实际上的问题是我想在所有浏览器上使用我的应用程序,特别是上面提到的 Internet Explorer 中的浏览器模式和文档模式。

如果我只是在 IE10 或标准视图中将文档模式更改为怪癖,它会给我输出。但具体来说,我希望它在这个或任何其他使用 css 或 javascript 的解决方法中。

我还尝试使用元标记强制更新文档模式和浏览器模式,但也没有帮助,因为它没有解决我的问题。

【问题讨论】:

  • IE 从 IE 开始就支持边界半径,即使不支持,您也可以使用 IE10 供应商前缀 (-ms-)。
  • 除了没有-ms-border-radius可言。

标签: javascript html css internet-explorer internet-explorer-10


【解决方案1】:

IE 从版本 9 开始支持圆角,因此您不需要 PIE 库。

您还定义了两次border-radius 属性,这无关紧要,但最好每个属性只定义一次。

另外,我注意到您正在以非标准方式使用 border-radius 属性。您提供的第四个参数#999 无效,只允许长度或百分比作为值。这可能会导致 IE 忽略该属性。也许你的意思是:

border-radius: 0px 0px 5px;
border-color: #999;
border-style: solid;

MDN 上查看border-radius 文档。

【讨论】:

  • IE 应该可以轻松区分无效的border-radius:0px 0px 5px #999; 和有效的border-radius: 20px; - 它就像第一个不存在一样。
  • 我认为这不是答案,因为我认为您忽略了图像的底部,其中我提到了我主要关心的文档模式和浏览器模式。在 IE10 的这些模式下,我的应用程序无法正常工作。默认情况下,Internet Explorer 以这些设置启动...
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2017-06-17
  • 2013-06-19
  • 2010-11-02
  • 2015-03-07
  • 1970-01-01
  • 2020-07-30
  • 2014-02-03
相关资源
最近更新 更多