css - CSS pie 在 IE 8 中不工作，但在 IE 9 中工作

Question

我正在为边框半径使用以下代码：

.box {
     width:250px;
     height:250px;
     background:#ce0000;
     border-top-left-radius: 15px;
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;
     border-top-right-radius: 15px;
     behavior:url(images/PIE.htc);
}

它在 IE 9 中运行良好。但它在 IE 8 中不起作用。我做错了什么？

Answer 1

根据文档，PIE 仅支持速记边界半径规则：

对于 PIE 解析的所有 CSS 属性，只会识别这些属性的简写版本。例如，虽然支持border-radius，但不支持单独的手写border-top-left-radius 等属性。

原因与没有相对于 CSS 文件解析 URL 的原因相同（见上文）：PIE 无法查看每个样式属性的来源。如果同时存在速记和速记属性，PIE 无法确定 CSS 作者指定这些属性的顺序，也无法确定每个属性的选择器的特异性。因此，它无法就应优先考虑哪些财产做出明智的决定。

为了避免做出愚蠢的猜测，我们选择只支持速记属性。选择速记而不是速记以保持文件较小并避免繁琐的重复。

http://css3pie.com/documentation/known-issues/#shorthand

因此，尝试将您的 CSS 更改为：

.box {
     width:250px;
     height:250px;
     background:#ce0000;
     border-radius : 15px 15px 5px 5px;
     behavior:url(images/PIE.htc);
}