Question

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

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

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

请参阅example页面

我的代码：

<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>

Answer 1

终于找到了答案 - 如此简单（但看似随意）。将以下属性添加到div的样式：

border-style: solid;

Firefox 15：div内容溢出到border-image

1 个答案: