html - 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;

更新:

latest CSS3 spec表示边框图像不应显示在框的中间，因此 Firefox 的实现是正确的。要在整个框中显示边框图像，请为 border-image-slice 属性添加 fill 值，或使用 fill 关键字border-image 简写。以下 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 规则的顺序。