2

まず、 http ://dbaron.org/log/20120612-border-image で説明されているように、Firefox 15 で -moz-border-image のプレフィックスが解除されていることを認識してい ます。その点で、Firefox 15 で動作するように CSS を修正しました。私の問題は異なります（おそらく接線ですが）。

つまり、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

最後に答えを見つけました - とても簡単です（一見恣意的に見えます）。次のプロパティを div のスタイルに追加します。

border-style: solid;
于 2012-09-22T21:09:38.957 に答える