CSS 边框图像：IE 的解决方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3567501/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
border-image: workaround for IE
提问by Rodrigo Souza
Is there any workaround for IE which makes me able to use border-image? I'm developing a site and it's working properly in every browser but IE. I need to mimic these bars 
IE 是否有任何解决方法使我能够使用border-image？我正在开发一个网站，它在除 IE 之外的每个浏览器中都能正常工作。我需要模仿这些酒吧
I could use the ie-css3.htchack but border-radiusworks only with the four corners together (which doesn't apply here, 'cause the top border isn't rounded) and the filtercss property (for gradient) doesn't work with border-radiusat all (it fills the whole element ignoring the border radius limits). In case there's no workaround for this, how would be the best way for doing this?
我可以使用ie-css3.htchack 但border-radius只能将四个角一起使用（这在此处不适用，因为顶部边框未圆角）并且filtercss 属性（用于渐变）不适用于border-radiusat all（它填充整个元素而忽略边界半径限制）。如果没有解决方法，那么最好的方法是什么？
回答by Ron Ferraro
The .pngfiles are unnecessary. Just use CSS3 pie: http://css3pie.com/
这些.png文件是不必要的。只需使用 CSS3 馅饼：http: //css3pie.com/
Get rid of the proprietary IE filter entirely, and use (heh, the proprietary) -pie-background:linear-gradient(values)instead.
完全摆脱专有的 IE 过滤器，并使用（嘿，专有的）-pie-background:linear-gradient(values)代替。
Works harmoniously with individually rounded corners: border-radius: 0 5px 5px 5px
与单独的圆角协调工作： border-radius: 0 5px 5px 5px
In that case, the top-left corner would be no border-radius, and the other corners (clockwise) would be at 5px each.
在这种情况下，左上角将没有边框半径，而其他角（顺时针）将为每个 5px。
Then use behavior:url(path_to/pie.htc);in the same style.
然后behavior:url(path_to/pie.htc);以相同的样式使用。
Remember also that the path_to is relative to the document being viewed, not the CSS file that calls it. Make sure to check that if it doesn't work right off the bat.
还要记住 path_to 是相对于正在查看的文档，而不是调用它的 CSS 文件。确保检查它是否立即不起作用。
I've tested this plenty of times and it works like a charm.
我已经测试了很多次，它的作用就像一个魅力。
Additional information:
附加信息：
If sometimes your styling appears and vanishes, try giving your element a position:relativeand a specified z-index. The way CSS3 PIE works, it plays with the z-index and can make your styled gradients (and rounded corners, etc.) appear underneath the background if not specified, particularly if you use negative margins or something odd like that.
如果有时您的样式出现并消失，请尝试为您的元素提供 aposition:relative和指定的z-index. CSS3 PIE 的工作方式是使用 z-index，如果未指定，它可以使您的样式渐变（和圆角等）出现在背景下方，尤其是当您使用负边距或类似的东西时。
回答by babtek
Take a really wide image of that red gradient with the proper 4 corner cutouts, save it as an image (transparent PNG on corners since you are not supporting IE6).
使用适当的 4 个角切口拍摄该红色渐变的非常宽的图像，将其另存为图像（角上的透明 PNG，因为您不支持 IE6）。
For each of those header areas you will wrap it like so:
对于每个标题区域，您将像这样包装它：
<div class="outer"><div class="inner">ENQUETE</div></div>
You set this image as background on both of those elements, offset one of them so you can get the image endcaps on both beginning and end. Adjust the spacing/shift until you are clear on both round segments.
您将此图像设置为这两个元素的背景，偏移其中一个元素，以便您可以在开头和结尾处获得图像结束符。调整间距/移位，直到您在两个圆段上都清楚为止。
.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;
}
回答by Brad
The only real solution might be to make your corners or sides images. Its looks as though everything is the same size just has an expandable width. so it should be farely easy to code with almost no lag time for load.
唯一真正的解决方案可能是制作您的角落或侧面图像。它看起来好像所有东西都是相同的大小，只是具有可扩展的宽度。所以它应该很容易编码，几乎没有加载延迟时间。
This is why I stick the the concept of using what is proven available. Meaning, if your target market is using IE7+ you should be conscious while designing and programming, so you dont run into small problems like this.
这就是为什么我坚持使用已证明可用的概念的原因。意思是，如果你的目标市场使用 IE7+，你在设计和编程时应该有意识，这样你就不会遇到这样的小问题。
All this CSS3 and HTML5 is awesome stuff but we, as developers, are still limited to what everyone see's. If you want to have an even playing field for all users, then you can rely on new coding practices until you can do things, like border-radius, across the board in all browsers.
所有这些 CSS3 和 HTML5 都是很棒的东西，但作为开发人员，我们仍然局限于每个人看到的东西。如果您想为所有用户提供一个公平的竞争环境，那么您可以依靠新的编码实践，直到您可以在所有浏览器中全面执行诸如 border-radius 之类的事情。
On the flip side, you might just not care about what IE users see; therefore you can just have the different style as a browser enhancement, for people who use the other browsers.
另一方面，您可能并不关心 IE 用户看到的内容；因此，对于使用其他浏览器的人，您可以将不同的样式作为浏览器增强功能。
回答by Rob
No, but the ie-css3.htc thing may be the only possible work around if that's the one I'm thinking of. Or was there another js script I'm thinking of that solved this? Can't remember.
不，但是 ie-css3.htc 可能是唯一可能的解决方法，如果那是我正在考虑的方法。或者是否有另一个我正在考虑的 js 脚本解决了这个问题？不记得了。
回答by Willabee
Hit the exact same issue and gave IE<=9 via conditional comments a fall-back. However, this solution is now broken with the latest IE10 prev4 still not supporting border-image and also does not support IE conditional comments. Back to the drawing board...
遇到完全相同的问题，并通过条件注释给 IE<=9 一个后备。然而，这个解决方案现在被打破了，最新的 IE10 prev4 仍然不支持边框图像，也不支持 IE 条件注释。回到绘图板...
Working on the solution we should really use: feature testing.
研究我们真正应该使用的解决方案：功能测试。
Using Modernizr which adds CSS3 class names to html tag and testing for border-image (do things the web standards way) or no-border-image (give IE users the best you can do but not the same experience as compliant browsers and display an IE visible only link to your page that tells them how to get a better experience: drop IE for example).
使用 Modernizr 将 CSS3 类名添加到 html 标签并测试边框图像（以 Web 标准方式做事）或无边框图像（为 IE 用户提供您能做的最好但与兼容浏览器不同的体验并显示IE 可见仅链接到您的页面，告诉他们如何获得更好的体验：例如删除 IE）。
