javascript – 移动浏览器上的Flexslider> height等于最高的>

我试图找出Flexslider的一个问题,只有当我在Safari Mobile等移动浏览器上测试时才会出现这个问题.

所有< li>容器与最高的< li>具有相同的高度,即使没有足够的内容来证明它们具有相同的高度.

我不知道如何抓住这个屏幕截图,因为它在桌面浏览器上工作正常,但在移动浏览器上却不行.这是一个小提琴,显示它正如我在桌面浏览器上查看时所期望的那样,容器的高度根据内容的大小调整.

http://jsfiddle.net/CsCyh/

这是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>

这是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');

标签：html,flexslider,javascript,jquery,css
来源： https://codeday.me/bug/20190901/1780453.html