Question

上面的链接是我一直在努力的页面。我使用边框顶部底部作为背景图像。它在Chrome和FF上看起来很棒。但在IE上它只会显示一个纯色背景图像不会出现。

有人可以帮我解决我错过的问题吗？

谢谢！

Answer 1

IE不支持border-image属性，因为您可以看到here。一种解决方法是在上方和下方创建两个div，并为它们提供所需的background-image：

HTML：

<div class="myborder"></div>
<ul id="blockquote">
    <li>Completely formulate parallel customer service rather than B2C initiatives.</li>
    <li>Compellingly target efficient experiences whereas seamless partnerships.</li> 
    <li> Seamlessly transition customer directed applications whereas intuitive.</li> 
    <li> Holisticly mesh team building "outside the box" thinking.</li>
</ul>
<div class="myborder"></div>

CSS：

.myborder {
    width: 600px;
    height: 13px;
    background: url('quote-border.png') repeat-x;
}

Answer 2

不接受这个有答案，我只是移动了评论＆＃39;

的内容。目前任何版本的IE都不支持

border-image - caniuse.com/#search=border-image - Nick

事实上，你必须将你的html拆分成背景图像的顶部和底部div - Brewal

@Brewal，这些都是恕我直言的答案。 - aldux

<小时/> 从我自己开始，我会使用：before和：after来创建你想要的东西。

你想要更好的东西吗？

<div class="container with THE-texture and padding">
    <div>Your content</div>
</div>

这样，outter容器就像一个图像背景边框。这是working example。

视觉结果中的IDENTICAL比你想要的要强。在html中，您添加了一个额外的容器。这是一个区别。

哦，让我猜，有＆＃39; simili＆＃39;两边的边界？ - ＆GT;删除边填充：http://jsfiddle.net/8puJf/1/

IE不会将背景图像显示为边框

2 个答案: