CSS 거품 파이어 폭스

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> 

그것은 크롬, 오페라와 사파리에서 완벽하게 작동하지만 파이어 폭스에 있지 않습니다. 왜 ?

스크린 샷 (왼쪽 크롬 오른쪽 파이어 폭스) : http://ge.tt/7dGLW7U?c

Answer 1

파이어 폭스는 다른 테두리 속성없이 자체 border-width을 가진 좋아하는 것 같지 않습니다. 당신의 border-width 라인 전에이 줄을 추가하십시오 :

border:solid transparent; 

UPDATE :

latest CSS3 spec 파이어 폭스의 구현이 올 수 있도록 테두리 이미지가 상자의 중앙에 표시되지 않을 것을 말한다. 전체 상자에 테두리 이미지를 표시하려면 border-image-slice 속성에 fill 값을 추가하거나 border-image 약어로 fill 키워드를 사용하십시오. 오페라는 아직 fill을 지원하지 않습니다

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

참고하지만 당신은 그냥 그 자체 stretch을 사용하는 경우가 작동합니다 다음 CSS는 당신을 위해 작동합니다. 또한 CSS 규칙을 구문 분석하는 순서이므로 CSS를 지원하는 브라우저의 경우 접두사가없는 속성을 마지막으로 넣는 것이 좋습니다.