0

私はいくつかのCSSを持っています：

.bubbledLeft,
.bubbledRight{
    position: relative;
    margin-top: 3px;
    max-width: 99%;
    clear: both;
        min-width: 99%;
}

.bubbledLeft{
    float: left;
    margin-right: auto;
    padding: 14px 10px 4px 15px; /*position within the border*/
}

.bubbledLeft:before{
    z-index: -1;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    content: "";

    border-width: 8px 10px 8px 17px; 
    border-image: url("/assets/chat/speech_bubble_left_2.png") 8 10 8 17 stretch stretch;
    -webkit-border-image: url("/assets/chat/speech_bubble_left_2.png") 8 10 8 17 stretch stretch;
    -moz-border-image: url("/assets/chat/speech_bubble_left_2.png") 8 10 8 17 stretch stretch;
    -o-border-image: url("/assets/chat/speech_bubble_left_2.png") 8 10 8 17 stretch stretch;
}

.bubbledRight{
    float: right;
    margin-left: auto;
    text-align: right;
    text-align: left;
    padding: 4px 15px 4px 15px; /*position within the border*/  
}

.bubbledRight:before{
    z-index: -1;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    content: "";

    border-width: 8px 17px 8px 10px; 
    border-image: url("/assets/chat/speech_bubble_right_2.png") 8 17 8 10 stretch stretch ;
    -webkit-border-image: url("/assets/chat/speech_bubble_right_2.png") 8 17 8 10 stretch stretch ;
    -moz-border-image: url("/assets/chat/speech_bubble_right_2.png") 8 17 8 10 stretch stretch ;
    -o-border-image: url("/assets/chat/speech_bubble_right_2.png") 8 17 8 10 stretch stretch ;
}

HTML：

<div class="content">
    <textarea id="messageText" rows="3" style="width: 80%; resize: none;  height: 40px; border: 0px; position: fixed; top: 0px; left: 0px; z-index: 999;" >Napisz wiadomość...</textarea>
    <button id="sendMsgBtn-ajax" class="sendMsgBtn">Wyślij</button>
    <div class="commentArea" id="commentArea">
        <% @msgs.each do |m| %>
            <% if (current_user.blank? == false && m.user.blank? == false && m.user.email == current_user.email) %>
                <div class="bubbledRight">
                    <%= m.body %>
                    <br />
                    <div class="date-right"><%= m.created_at.to_time.strftime("%Y-%m-%d %H:%M") %></div>
                    <div class="nick-right"> ~<%= m.user.blank? == false ? m.user.email : "gość"  %></div>
                </div>
                <br />
            <% else %>
                <div class="bubbledLeft">
                    <%= m.body %>
                    <br />
                    <div class="date"><%= m.created_at.to_time.strftime("%Y-%m-%d %H:%M") %></div>
                    <div class="nick"> ~<%= m.user.blank? == false ? m.user.email : "gość" %></div>
                </div>
                <br />
            <% end %>
        <% end %>
    </div>
</div>

Chrome、Opera、Safariでは完全に機能しますが、Firefoxでは機能しません。なんで ？

スクリーンショット（左クローム右ファイアフォックス）：http：//ge.tt/7dGLW7U ？c

4

1 に答える 1

2

border-widthFirefoxは、他の境界線プロパティなしでそれ自体を持っていることを好まないようです。行の前に次の行を追加してみてくださいborder-width。

border:solid transparent;

アップデート：

最新のCSS3仕様では、境界線の画像をボックスの中央に表示してはならないため、Firefoxの実装は正しいとされています。ボックス全体に境界線の画像を表示するには、プロパティのfill値を追加するか、省略形でキーワードを使用します。次のCSSが機能するはずです。border-image-slicefillborder-image

-webkit-border-image: url("speech_bubble_left_2.png") 8 10 8 17 fill stretch;
-moz-border-image: url("speech_bubble_left_2.png") 8 10 8 17 fill stretch;
-o-border-image: url("speech_bubble_left_2.png") 8 10 8 17 stretch;
border-image: url("speech_bubble_left_2.png") 8 10 8 17 fill stretch;

Operaはまだサポートしfillていませんが、単独で使用すれば機能することに注意してくださいstretch。また、プレフィックスなしのプロパティは、CSSルールが解析される順序であるため、プレフィックスなしのプロパティをサポートするブラウザーの最後に配置することをお勧めします。

于 2012-12-25T14:41:57.630 に答える