首页 > 解决方案 > Javascript 不适用于 ie 浏览器和 ff

问题描述

我有一个 javascript 将新闻和事件的高度重定向到最高,以便它们都具有相同的高度大小,不知何故它在 mozilla 和 ie 中不起作用。

但是,使用 chrome 时,它​​可以完全发挥作用,使它们的大小都相同。其他浏览器都没有在控制台中显示任何错误,所以我很难调试它

这是我索引页面的唯一部分,包括我使用的 div 和 js 中的脚本,我使用 laravel 作为框架顺便说一句:

<div class="col-md-8 news homepage s2">
     <div class="swiper-container">
          <div class="swiper-wrapper">
               @foreach($events as $n)
                   <div class="swiper-slide remove_p">
                        <h4>{!! nl2br($n['titulo_'.$lang]) !!}</h4>
                        {!! nl2br($n['desc_'.$lang]) !!}
                        <a href="{{ ROUTE('page', ['cat' => 'eventos', 'id' => $n->id]) }}" class="link more_btn">{{ $geral['SAIBA_MAIS']->value }}</a>
                   </div>
               @endforeach
          </div>              
     </div>
     <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
     </div>
</div>
</div>

@section('scripts')
@parent

<script type="text/javascript">
var mySwiper = new Swiper('.homepage.s1 .swiper-container', {
    speed: 400,
    spaceBetween: 30,
    slidesPerView: 3,
    navigation: {
      nextEl: '.homepage.s1 .swiper-button-next',
      prevEl: '.homepage.s1 .swiper-button-prev',
    },
    breakpoints: {
      480: {
        slidesPerView: 1,
        spaceBetween: 100
      }
    }
});

var mySwiper = new Swiper('.homepage.s2 .swiper-container', {
    speed: 400,
    spaceBetween: 30,
    slidesPerView: 3,
    navigation: {
      nextEl: '.homepage.s2 .swiper-button-next',
      prevEl: '.homepage.s2 .swiper-button-prev',
    },
    breakpoints: {
      480: {
        slidesPerView: 1,
        spaceBetween: 100
      }
    }
});
</script>
<script>
  setTimeout(resizeSwiper, 500)
  setTimeout(resizeSwiper, 1000)
  setTimeout(resizeSwiper, 2000)
  setTimeout(resizeSwiper, 3000)

  function resizeSwiper() {
    $('.swiper-container').each(function() {
      var $this = $(this)
      var height = 0
      $this.find('.swiper-slide').each(function() {
        var s_title_h = $(this).find('h4').height()
        var s_p_h = $(this).find('p').eq(0).height()

        if(height < (s_title_h + s_p_h)) {
          height = (s_title_h + s_p_h)
        }
      })

      $this.css({
        'height': height + 50
      })

      $(this).parent().parent().find('.col-md-4.line_block').css({
        'height': height + 50
      })

      $(this).parent().parent().find('.col-md-4.img_eventos').css({
        'height': height + 50
      })

    })

    /*$('.img_eventos').css({
      'height': $('.swiper-container').eq(1).height() + 0
    })*/
  }
</script>
@endsection

滑块也是如此,它没有在两个浏览器中显示

标签: javascriptphphtmllaravel

解决方案


推荐阅读