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。爲什麼？

截圖（左右鉻火狐）：似乎http://ge.tt/7dGLW7U?c

Answer 1

Firefox不喜歡有它自己border-width沒有其他的邊框屬性。試試你的border-width行之前加入這一行：

border:solid transparent; 

UPDATE：

的latest CSS3 spec說，邊界圖像不應該顯示在盒子的中間，這樣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規則的順序。