0

我有一些 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

4

1 回答 1

2

Firefox 似乎不喜欢border-width没有其他边框属性。尝试在您的行之前添加此border-width行：

border:solid transparent;

更新：

最新的CSS3 规范说边框图像不应该显示在框的中间，所以 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 规则的顺序。

于 2012-12-25T14:41:57.630 回答