边框图像:IE 的解决方法 [英] border-image: workaround for IE

问题描述

是否有任何适用于 IE 的解决方法使我能够使用 border-image?我正在开发一个网站，它在除 IE 之外的所有浏览器中都能正常工作.我需要模仿这些条形

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-css3.htc hack 但是 border-radius 仅适用于四个角(此处不适用，因为顶部边框未圆角)并且 filter css 属性(用于渐变)不适用于border-radius (它填充整个元素而忽略边界半径限制).如果没有解决方法，那么最好的方法是什么?

I could use the ie-css3.htc hack but border-radius works only with the four corners together (which doesn't apply here, 'cause the top border isn't rounded) and the filter css property (for gradient) doesn't work with border-radius at 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?

推荐答案

.png 文件是不必要的.只需使用 CSS3 pie:http://css3pie.com/

The .png files are unnecessary. Just use CSS3 pie: http://css3pie.com/

完全摆脱专有的 IE 过滤器，并使用(嘿，专有的)-pie-background:linear-gradient(values) 代替.

Get rid of the proprietary IE filter entirely, and use (heh, the proprietary) -pie-background:linear-gradient(values) instead.

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

Works harmoniously with individually rounded corners: border-radius: 0 5px 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.

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

Then use behavior:url(path_to/pie.htc); in the same style.

还要记住 path_to 是相对于正在查看的文档，而不是调用它的 CSS 文件.请务必检查它是否立即不起作用.

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.

我已经对此进行了多次测试，它的效果非常好.

I've tested this plenty of times and it works like a charm.

附加信息:

如果有时你的样式出现又消失，试着给你的元素一个 position:relative 和一个指定的 z-index.CSS3 PIE 的工作方式是使用 z-index，如果未指定，它可以使您的样式渐变(和圆角等)出现在背景下方，尤其是当您使用负边距或类似的东西时.

If sometimes your styling appears and vanishes, try giving your element a position:relative and 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.

这篇关于边框图像:IE 的解决方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！