Css FF中的Framework7消息样式问题

Firefox中的framework7消息存在问题。所附图像显示未正确显示的最后一条消息

这可能可以通过更改一些css属性来修复。 下面是我们使用的消息模板。没有进行其他css样式

<!-- template7 templates -->
<script type="text/template7" id="messagesTemplate">    
    <!-- Top Navbar-->
    <div class="navbar">
      <div class="navbar-inner">
        <div class="left sliding"><a href="index.cfm" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>           
        <div class="center sliding mobileNums" data-tonumber="{{@global.activeNumber}}" data-f2pmds="{{@global.f2pmds}}" data-fromnum="{{@global.fromNumber}}">{{#if @global.activeNumber}}{{@global.activeNumber}}{{else}}New Message{{/if}}  </div>
        <div class="right"><a href="#" class="link open-panel icon-only"><i class="icon icon-bars"></i></a></div>           
      </div>
    </div>
    <div class="pages navbar-through">
      <div data-page="messages" class="page no-toolbar toolbar-fixed">
        <div class="toolbar messagebar">
          <div class="toolbar-inner"><a href="#" class="link icon-only"><i class="icon icon-camera"></i></a>
            <textarea placeholder="Message"></textarea><a href="#" class="link send-message">Send</a>
          </div>
        </div>
        <div class="page-content messages-content">
          <div class="messages">     
                {{#each messages}}                      
                    {{#if dsent}}
                        <div class="messages-date">{{dsent}}</div>
                    {{/if}}                 

                    {{#if sent}}                                                    
                        <div class="message message-sent">
                          <div class="message-text">{{body}}
                          <br />
                          {{#if time}}<div class="msgDate">{{time}}</div>{{/if}}
                          </div>
                        </div>  
                    {{else}}                                    
                        <div class="message message-received message-with-avatar">
                          <!---<div class="message-name">Kate</div>--->
                          <div class="message-text">{{body}}
                          <br />
                          {{#if time}}<div class="msgDate">{{time}}</div>{{/if}}
                          </div>
                          <div style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-7.jpg)" class="message-avatar"></div>
                        </div>                                          
                    {{/if}}

                {{/each}}           

            </div>
        </div>
      </div>
    </div>          
</script>   

{{{#if@global.activeNumber}{{@global.activeNumber}}{{else}}新消息{/if}
{{{#每条消息}
{{{#if dsent}}
{{dsent}}
{{/if}
{{#如果发送}
{{body}}


{{{if time}}{{time}{{/if}}
{{else}
{{body}}


{{{if time}}{{time}{{/if}}
{{/if}
{{/每个}}

Firefox无法修复此问题。它只是不支持webkit浏览器中的CSS掩码

如果你的消息栏是固定高度的，比如我的，你可以试试

@-moz-document url-prefix() {
    .messages{
    padding-bottom: 44px;
     }
    .message-received > .message-text{
    margin-left: 35px!important;
  }
}

这对我来说是可行的，但是除了Chrome（或Safari）之外，你不能在任何浏览器中添加消息的尾部

---

这是因为它们是唯一支持

-webkit mask box image

属性的浏览器。

默认情况下messagebar的高度是固定的吗？@Vlad No。它会根据您输入的文本行数而增长。这是目前我能想到的最好的非js方法。