Firefox 15：div内容溢出到边框图像

首先，我知道Firefox 15中-moz-border-image的前缀不固定，如下所述： http://dbaron.org/log/20120612-border-image。我修复了我的CSS在这方面与Firefox 15一起工作。我的问题是不同的（尽管可能是切向）。Firefox 15：div内容溢出到边框图像

简而言之，在Firefox 15中，带有边框图像的div的内容现在与所述边框图像重叠，就好像边框是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>

来源

2012-09-22 MikeX

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

border-style: solid;

来源

2012-09-22 21:09:38 MikeX

它不是任意的。这只是'border-image'用于强制Gecko中的'border-style：solid'，但根据规范，它不再那么做了。 –

Chrome bug报告在这里：https://bugs.webkit.org/show_bug.cgi?id=99922 –

Firefox 15：div内容溢出到边框图像

回答

相关问题