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的实现是正确的。要在整个框中显示边框图像，请为fill属性添加border-image-slice值，或在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规则的顺序。

CSS泡泡在Firefox中不起作用

1 个答案: