Flexslider< li> height等于最高的< li>在移动浏览器 [英] Flexslider <li> height's equal the tallest <li> on a mobile browser

问题描述

我试图找出Flexslider的问题，只有当我在Safari Mobile等移动浏览器上测试时才出现。 >容器的高度与最高的

相同，即使没有足够的内容来证明它们的高度相同。

我不知道如何抓取这是一个屏幕截图，因为它在桌面浏览器上正常工作，但在移动浏览器上不工作。这是一个小调，显示它工作，因为我期望当我在桌面浏览器上查看它的容器的高度根据内容的大小调整。

http://jsfiddle.net/CSCyh/

这里是hml：

 < div class =flexslider> 
< ul class =slides> 
< li> 
< img src =http://i.imgur.com/YSVlz2Z.jpg/> 
< h2>< a href＃>第一个链接此< / a>< / h2> 
< p>这里有一些文字可能是讯息< / p> 
< a href =＃data-role =buttondata-icon =arrow-rdata-iconpos =right>其他链接< / a> 
< / li> 
< li> 
< img src =http://i.imgur.com/YSVlz2Z.jpg/> 
< h2>< a href＃>第二个链接此< / a>< / h2> 
< p>这里有一些文字可能是讯息< / p> 
< / li> 
< li> 
< img src =http://i.imgur.com/YSVlz2Z.jpg/> 
< h2>< a href＃>第三个链接此< / a>< / h2> 
< p>这里有一些文字可能是讯息< / p> 
< / li> 
< / ul> 
< / div> 
  

这里是Flexslider的JS：

  $（'。flexslider'）。flexslider（）; 
  

解决方案

  var evenSliderHeight = function（slideContainer，slideItem）{
 var slider_height = 0; 
 var $ slider_slide = $（slideContainer）.find（slideItem）; 
 $ slider_slide.each（function（）{
 var __height = $（this）.outerHeight（true）; 
 if（slider_height< __height）{
 slider_height = __height; 
} 
}）; 
 $ slider_slide.css（'min-height'，slider_height）; 
}; 
 evenSliderHeight（'。flexslider-container'，'.slide'）; 
  

I am trying to figure out an issue with Flexslider that only appears when I test it on an mobile browser such as Safari Mobile.

All of the <li> containers are the same height as the tallest <li>, even when there is not enough content to justify making them equal heights.

I am not sure how to grab a screen shot of this since it works fine on a desktop browser but not on mobile browsers. Here's a fiddle that shows it working as I would expect when I view it on my desktop browser, the container's height resizes depending on the ammount of content.

http://jsfiddle.net/CsCyh/

Here is the hml:

<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="http://i.imgur.com/YSVlz2Z.jpg" />
      <h2><a href"#">First Link Here</a></h2>
      <p>Some text here that could be a message</p>
      <a href="#" data-role="button" data-icon="arrow-r" data-iconpos="right">Another Link Here</a>
    </li>
    <li>
      <img src="http://i.imgur.com/YSVlz2Z.jpg" />
      <h2><a href"#">Second Link Here</a></h2>
      <p>Some text here that could be a message</p>      
    </li>
    <li>
     <img src="http://i.imgur.com/YSVlz2Z.jpg" />
     <h2><a href"#">Third Link Here</a></h2>
     <p>Some text here that could be a message</p>     
    </li>
  </ul>
</div>

Here's the JS for flexslider:

$('.flexslider').flexslider();

解决方案

Hmm, I ran into this issue awhile ago. I hope this helps!

var evenSliderHeight = function(slideContainer, slideItem) {
  var slider_height = 0;
  var $slider_slide = $(slideContainer).find(slideItem);
  $slider_slide.each(function() {
    var __height = $(this).outerHeight(true);
    if ( slider_height < __height ) {
       slider_height = __height;
    }
  });
  $slider_slide.css('min-height', slider_height);
};
evenSliderHeight('.flexslider-container', '.slide');

这篇关于Flexslider&lt; li&gt; height等于最高的&lt; li&gt;在移动浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！