Question

我有一个非常简单的级联元素，其中独立的内容块彼此之间逐渐淡入和淡出。问题在于（1）在过渡期间不保留字体大小，并且（2）完全不遵守em标记内内容的字体大小。 此问题仅在移动设备上的横向模式下存在。我无法以纵向模式重现此问题，也无法在任何大小的桌面浏览器上重现此问题。

在fadeOut和fadeIn期间，p的字体大小变大。转换完成后，字体大小将按定义设置为1em。有趣的是，em的字体大小即使在过渡后仍保持较大，只有p的其余部分才设置为定义的字体大小。

同样，这仅在移动设备上的横向模式下发生，而在纵向模式下不发生。在Safari和Chrome移动版中进行了测试。为什么为什么会这样？我以前从未遇到过。

下面是一小段供参考，尽管由于仅存在于移动环境中，所以该问题并未在其中重现。

    $('.testimonials > p:first').show();
    
    setInterval(function () {
        $('.testimonials > p:first')
            .fadeOut(1500)
            .next()
            .fadeIn(1500)
            .end()
            .appendTo('.testimonials');
    }, 3500);

       .testimonials {
          margin:50px auto;
          margin-bottom: 120px;
          display: block;
          width:95%;
          max-width: 800px;
          position: relative;
        }
        .testimonial {
          font-size: 1em;
          width: 100%;
          position: absolute;
          display: none;
        }
        .testimonial em {
          font-size: 1em;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="testimonials">
        <p class="testimonial">
          Random text 11111111 - <em>quoted as saying</em>
        </p>
        <p class="testimonial">
          Random text 22222222 - <em>quoted as saying</em>
        </p>
        <p class="testimonial">
          Random text 33333333 - <em>quoted as saying</em>
        </p>
      </div><!--testimonials-->

Answer 1

尝试使用此CSS

html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

在移动横向方向上过渡期间未保持字体大小

1 个答案: