2

首先，我知道 Firefox 15 中的 -moz-border-image 没有前缀，如下所述：http: //dbaron.org/log/20120612-border-image。在这方面，我修复了我的 CSS 以与 Firefox 15 一起使用。我的问题是不同的（尽管可能是切线的）。

简而言之，在 Firefox 15 中，带有边框图像的 div 的内容现在与所述边框图像重叠，就好像边框是 div 内部的一部分一样。其他浏览器不显示该问题并按预期运行，这使我无法简单地使用填充来补偿边框（其他浏览器将有过多的填充）。

我该如何解决这个问题？谢谢！

查看示例页面

我的代码：

<style type="text/css">

    body { background: yellow; }

    .borderbox {
    -moz-border-image: url(border_sprite.png) 31 25 25 20 / 31px 25px 25px 20px repeat stretch;
    -webkit-border-image: url(border_sprite.png) 31 25 25 20 fill repeat stretch;
    -o-border-image: url(border_sprite.png) 31 25 25 20 repeat stretch;
    border-image: url(border_sprite.png) 31 25 25 20 fill repeat stretch;
    border-width: 31px 25px 25px 20px;
    border-image-width: 31px 25px 25px 20px;
    padding: 0 10px 20px 0;
    text-align: right;
    overflow: auto;
    width: 400px;
    height: 400px;
    color: purple;
    font-size: 20px;
 }

</style>

<!DOCTYPE html>
<head></head>
<body>

<div class="borderbox">
    the content should be bound to the inner white box. Why does it also cover the blue border in Firefox 15?
</div>

</body>
</html>
4

1 回答 1

1

Finally found the answer - so simple (yet seemingly arbitrary). Add the following property to the div's style:

border-style: solid;
于 2012-09-22T21:09:38.957 回答