CSS泡泡在Firefox中不起作用

Question

我有一些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。 為什么？

截圖（左側chrome右側firefox）： http ： //ge.tt/7dGLW7U？c

Answer 1

如果沒有其他邊框屬性，Firefox似乎不喜歡自己的border-width 。 嘗試在border-width線之前添加此行：

border:solid transparent;

更新：

最新的CSS3規范說邊框圖像不應該顯示在框的中間，因此Firefox的實現是正確的。 要在整個框中顯示邊框圖像，請添加border-image-slice屬性的fill值，或在border-image速記中使用fill關鍵字。 以下CSS應該適合您：

-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規則的順序。