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內容溢出到邊框圖像

回答

相關問題