border-image：IE的解决方法

Question

是否有IE的解决方法使我能够使用border-image？我正在开发一个网站，它在IE浏览器的每个浏览器中都能正常工作。我需要模仿这些条

我可以使用ie-css3.htc黑客，但border-radius仅适用于四个角（这里不适用，因为顶部边框没有圆角）和{{1} } css属性（对于渐变）根本不适用于filter（它会填充忽略边界半径限制的整个元素）。如果没有解决方法，那么最好的方法是什么？

Answer 1

.png个文件是不必要的。只需使用CSS3饼：http://css3pie.com/

完全摆脱专有IE过滤器，并使用（heh，专有）-pie-background:linear-gradient(values)代替。

与单独的圆角协调工作：border-radius: 0 5px 5px 5px

在这种情况下，左上角没有边界半径，其他角落（顺时针）各为5像素。

然后以相同的样式使用behavior:url(path_to/pie.htc);。

还要记住，path_to是相对于正在查看的文档，而不是调用它的CSS文件。如果它不能正常工作，请务必检查它。

我已经测试了很多次，它就像一个魅力。

其他信息：

如果有时您的样式显示并消失，请尝试为您的元素添加position:relative和指定的z-index。 CSS3 PIE的工作方式，它与z-index一起使用，如果没有指定，可以使你的样式渐变（和圆角等）出现在背景下面，特别是如果你使用负边距或奇怪的东西。

Answer 2

使用正确的4个角落切口拍摄一张非常宽的红色渐变图像，将其保存为图像（角落上的透明PNG，因为您不支持IE6）。

对于每个标题区域，您将像这样包装它：

<div class="outer"><div class="inner">ENQUETE</div></div>

您可以将此图像设置为这两个元素的背景，偏移其中一个元素，这样您就可以在开头和结尾都获得图像端盖。调整间距/移位，直到两个圆形段都清晰。

.outer {  
    background: transparent url(redgradient.png) no-repeat 0px 0px;  
    margin: 0 10px 0 0;  
}  
.inner {  
    background: transparent url(redgradient.png) no-repeat 100% 0px;  
    position: relative;  
    left: 10px;  
}  

Answer 3

唯一真正的解决方案可能是制作角落或侧面图像。它看起来好像一切都是相同的大小只有一个可扩展的宽度。所以编码很容易编码，加载几乎没有滞后时间。

这就是为什么我坚持使用已经证明可用的概念的原因。这意味着，如果你的目标市场是使用IE7 +，你应该在设计和编程时有意识，所以你不会遇到像这样的小问题。

所有这些CSS3和HTML5都是非常棒的东西，但作为开发人员，我们仍然只限于每个人都看到的东西。如果你想为所有用户提供一个公平的竞争环境，那么你可以依靠新的编码实践，直到你可以在所有浏览器中全面开展边界半径等工作。

另一方面，您可能根本不关心IE用户看到的内容;因此，对于使用其他浏览器的用户，您可以将不同的样式用作浏览器增强功能。

Answer 4

不，但ie-css3.htc可能是唯一可行的工作，如果这是我正在考虑的那个。还是有另一个我正在考虑的js脚本解决了这个问题？不记得了。

Answer 5

点击完全相同的问题，通过条件评论给IE＆lt; = 9一个回落。但是，这个解决方案现在被最新的IE10 prev4打破，仍然不支持border-image，也不支持IE条件注释。回到绘图板......

我们应该使用的解决方案：功能测试。

使用Modernizr将CSS3类名称添加到html标记并测试border-image（按照Web标准方式执行）或无边框图像（为IE用户提供最好的功能，但与兼容的浏览器不同并显示一个IE可见的唯一链接到您的页面，告诉他们如何获得更好的体验：例如删除IE。