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

Question

http://dhrumin.com/uploads/index.html

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

有人可以帮我解决我错过的事情吗？

谢谢！

Answer 1

border-image如您在此处看到的， IE 不支持该属性。一种解决方法是在上方和下方创建两个 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

不要接受这个有答案，我只是从“评论”中移动了内容。

当前任何版本的 IE 都不支持border-image - caniuse.com/#search=border-image – Nick

实际上，您将不得不拆分您的 html 以使用背景图像制作顶部和底部 div – Brewal

@Brewal，这些是恕我直言的答案。–阿尔杜克斯

---

就我自己而言，我会使用 :before 和 :after 来创建你想要的东西。

你想要更好的东西吗？

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

这样，外部容器就像图像背景边框一样。这是一个工作示例。

它在视觉结果上与您希望的相同。在 html 中，您添加了 1 个额外的容器。那是有区别的。

哦，让我猜猜，两边有“simili”边框？--> 删除边的填充：http: //jsfiddle.net/8puJf/1/