jquery - 为什么 jQuery fotorama 3.0.8 在 IE11 初始化期间从 div 中删除所有内部内容？

Question

我有用于幻灯片的图像的简单 html。

<div id="looped-fotorama">    
<div>
        <img src="/templates/images/04.png">
    </div>

    <div>
        <img src="/templates/images/07.png">
    </div>

    <div>
        <img src="/templates/images/03.png">
    </div>

    <div> <img src="/templates/images/02.png"></div>
</div>

当我调用它来启用 fotorama 插件时

$("#looped-fotorama").fotorama();

我得到这个

<div class="fotorama fotorama_horizontal fotorama_shadows fotorama_csstransitions fotorama_loading" id="looped-fotorama" style="min-width: 0px;" data-auto="false">
   <div class="fotorama__wrap fotorama__wrap_style_touch">
      <div class="fotorama__noise"></div>
      <div class="fotorama__shaft" style="transform: translate(0px, 0px); transition-duration: 0ms;">
         <div class="fotorama__state" style="opacity: 1;">
            <div class="spinner" style="left: 16px; top: 16px; width: 0px; position: relative; z-index: 2000000000;" aria-role="progressbar">
               <div style="animation:opacity-100-25-0-12 1s linear infinite; top: -1px; position: absolute; opacity: 0.25;">
                  <div style="background: rgb(128, 128, 128); transform-origin: left 50%; border-radius: 1px; width: 10px; height: 2px; position: absolute; box-shadow: 0px 0px 1px rgba(0,0,0,0.1); transform: rotate(15deg) translate(6px, 0px);"></div>
               </div>
               <div style="animation:opacity-100-25-1-12 1s linear infinite; top: -1px; position: absolute; opacity: 0.25;">
                  <div style="background: rgb(128, 128, 128); transform-origin: left 50%; border-radius: 1px; width: 10px; height: 2px; position: absolute; box-shadow: 0px 0px 1px rgba(0,0,0,0.1); transform: rotate(45deg) translate(6px, 0px);"></div>
               </div>
               <div style="animation:opacity-100-25-2-12 1s linear infinite; top: -1px; position: absolute; opacity: 0.25;">
                  <div style="background: rgb(128, 128, 128); transform-origin: left 50%; border-radius: 1px; width: 10px; height: 2px; position: absolute; box-shadow: 0px 0px 1px rgba(0,0,0,0.1); transform: rotate(75deg) translate(6px, 0px);"></div>
               </div>
               <div style="animation:opacity-100-25-3-12 1s linear infinite; top: -1px; position: absolute; opacity: 0.25;">
                  <div style="background: rgb(128, 128, 128); transform-origin: left 50%; border-radius: 1px; width: 10px; height: 2px; position: absolute; box-shadow: 0px 0px 1px rgba(0,0,0,0.1); transform: rotate(105deg) translate(6px, 0px);"></div>
               </div>
               <div style="animation:opacity-100-25-4-12 1s linear infinite; top: -1px; position: absolute; opacity: 0.25;">
                  <div style="background: rgb(128, 128, 128); transform-origin: left 50%; border-radius: 1px; width: 10px; height: 2px; position: absolute; box-shadow: 0px 0px 1px rgba(0,0,0,0.1); transform: rotate(135deg) translate(6px, 0px);"></div>
               </div>
               <div style="animation:opacity-100-25-5-12 1s linear infinite; top: -1px; position: absolute; opacity: 0.25;">
                  <div style="background: rgb(128, 128, 128); transform-origin: left 50%; border-radius: 1px; width: 10px; height: 2px; position: absolute; box-shadow: 0px 0px 1px rgba(0,0,0,0.1); transform: rotate(165deg) translate(6px, 0px);"></div>
               </div>
               <div style="animation:opacity-100-25-6-12 1s linear infinite; top: -1px; position: absolute; opacity: 0.25;">
                  <div style="background: rgb(128, 128, 128); transform-origin: left 50%; border-radius: 1px; width: 10px; height: 2px; position: absolute; box-shadow: 0px 0px 1px rgba(0,0,0,0.1); transform: rotate(195deg) translate(6px, 0px);"></div>
               </div>
               <div style="animation:opacity-100-25-7-12 1s linear infinite; top: -1px; position: absolute; opacity: 0.25;">
                  <div style="background: rgb(128, 128, 128); transform-origin: left 50%; border-radius: 1px; width: 10px; height: 2px; position: absolute; box-shadow: 0px 0px 1px rgba(0,0,0,0.1); transform: rotate(225deg) translate(6px, 0px);"></div>
               </div>
               <div style="animation:opacity-100-25-8-12 1s linear infinite; top: -1px; position: absolute; opacity: 0.25;">
                  <div style="background: rgb(128, 128, 128); transform-origin: left 50%; border-radius: 1px; width: 10px; height: 2px; position: absolute; box-shadow: 0px 0px 1px rgba(0,0,0,0.1); transform: rotate(255deg) translate(6px, 0px);"></div>
               </div>
               <div style="animation:opacity-100-25-9-12 1s linear infinite; top: -1px; position: absolute; opacity: 0.25;">
                  <div style="background: rgb(128, 128, 128); transform-origin: left 50%; border-radius: 1px; width: 10px; height: 2px; position: absolute; box-shadow: 0px 0px 1px rgba(0,0,0,0.1); transform: rotate(285deg) translate(6px, 0px);"></div>
               </div>
               <div style="animation:opacity-100-25-10-12 1s linear infinite; top: -1px; position: absolute; opacity: 0.25;">
                  <div style="background: rgb(128, 128, 128); transform-origin: left 50%; border-radius: 1px; width: 10px; height: 2px; position: absolute; box-shadow: 0px 0px 1px rgba(0,0,0,0.1); transform: rotate(315deg) translate(6px, 0px);"></div>
               </div>
               <div style="animation:opacity-100-25-11-12 1s linear infinite; top: -1px; position: absolute; opacity: 0.25;">
                  <div style="background: rgb(128, 128, 128); transform-origin: left 50%; border-radius: 1px; width: 10px; height: 2px; position: absolute; box-shadow: 0px 0px 1px rgba(0,0,0,0.1); transform: rotate(345deg) translate(6px, 0px);"></div>
               </div>
            </div>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
               <g fill="none" stroke="#808080" stroke-width="2">
                  <circle cx="16" cy="16" r="13" />
                  <line x1="7" y1="7" x2="25" y2="25" />
               </g>
            </svg>
         </div>
         <div class="fotorama__frame fotorama__frame_active" style="visibility: hidden;">
            <div></div>
         </div>
         <div class="fotorama__frame" style="visibility: hidden;">
            <div></div>
         </div>
         <div class="fotorama__frame" style="visibility: hidden;">
            <div></div>
         </div>
         <div class="fotorama__frame" style="visibility: hidden;">
            <div></div>
         </div>
      </div>
      <i class="fotorama__arr fotorama__arr_prev fotorama__arr_disabled">?</i><i class="fotorama__arr fotorama__arr_next">?</i>
   </div>
   <div class="fotorama__thumbs fotorama__thumbs_previews" style="height: 56px; visibility: hidden;">
      <div class="fotorama__thumbs-shaft" style="transform: translate(0px, 0px); transition-duration: 0ms;">
         <i class="fotorama__thumb-border" style="border-width: 2px; top: 4px; width: 44px; height: 44px; display: inline; transform: translate(0px, 0px); transition-duration: 0ms;"></i>
         <div class="fotorama__thumb fotorama__thumb_selected" style="margin: 4px; width: 48px; height: 48px;">
            <canvas width="48" height="48" class="fotorama__thumb__img" style="width: 48px; height: 48px; visibility: visible;"></canvas>
         </div>
         <div class="fotorama__thumb" style="margin: 4px; width: 48px; height: 48px;">
            <canvas width="48" height="48" class="fotorama__thumb__img" style="width: 48px; height: 48px; visibility: visible;"></canvas>
         </div>
         <div class="fotorama__thumb" style="margin: 4px; width: 48px; height: 48px;">
            <canvas width="48" height="48" class="fotorama__thumb__img" style="width: 48px; height: 48px; visibility: visible;"></canvas>
         </div>
         <div class="fotorama__thumb" style="margin: 4px; width: 48px; height: 48px;">
            <canvas width="48" height="48" class="fotorama__thumb__img" style="width: 48px; height: 48px; visibility: visible;"></canvas>
         </div>
      </div>
   </div>
</div>

我注意到带有“fotorama__frame”类的块是空的。在 IE10（或 Google Chrome）中，我得到了带有 img 标签的这些块。

为什么 div 的所有内部内容都被删除了？

Answer 1

这里的问题是 Fotorama 3.0.8 从事用户代理嗅探。它认为 Internet Explorer 11 实际上是 Firefox 11。因此，它可能应用了错误的供应商前缀等等。这是一个很好的例子，说明了为什么我们不应该在 Web 开发中嗅探用户代理字符串（一般来说）。

var b = /(chrome)[ \/]([\w.]+)/.exec(a) 
     || /(webkit)[ \/]([\w.]+)/.exec(a) 
     || /(opera)(?:.*version|)[ \/]([\w.]+)/.exec(a) 
     || /(msie) ([\w.]+)/.exec(a) 
     || a.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec(a) 
     || [];

在 Internet Explorer 11 中，这会导致

var b = ["mozilla/5.0 (windows nt 6.3; ... rv:11.0", "mozilla", "11.0"]

升级到 Fotorama 4.4.8+ 应该可以解决这个问题。较新的版本似乎可以正确识别 Internet Explorer 11，并为其提供适当的内容。

最新版本： http: //fotorama.io/