FF中的Framework7消息样式问题

Question

我们在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>   

Answer 1

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

Answer 2

如果您的消息栏是固定高度，例如我的，则可以尝试

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

这对我有用，但您无法在Chrome（或Safari）以外的任何浏览器中在邮件尾部添加内容。

这是因为它们是唯一支持-webkit-mask-box-image属性的浏览器。