OWL CAROUSEL：图像高度问题

Question

Hello StackOverflow社区。

在我的新Java EE项目中，我决定使用Owl Carousel，这是一个功能强大，灵活且易于使用的插件，可以显示一些可用的礼物。

我发现了一些关于图像高度自定义的不良行为。

以下是使用owl轮播的页面图像，但没有自定义图像的高度：

以下是使用owl carousel定制图像高度的页面图像：

这里是我使用ti生成轮播的代码：

#!/bin/bash

$PROT1="1a4g"
$PROT2="1ogg"

#create the script
echo "fetch $PROT1
fetch $PROT2
select *" > script.pml

# GO!
pymol script.pml

$(document).ready(function() {

  var owl = $("#owl-demo");

  owl.owlCarousel({
    items: 6, //10 items above 1000px browser width
    itemsDesktop: [1199, 4], //5 items between 1000px and 901px
    itemsDesktopSmall: [979, 3], // betweem 900px and 601px
    itemsTablet: [600, 2], //2 items between 600 and 0
    itemsMobile: [479, 1] // itemsMobile disabled - inherit from itemsTablet option
  });

  // Custom Navigation Events
  $(".next").click(function() {
    owl.trigger('owl.next');
  })
  $(".prev").click(function() {
    owl.trigger('owl.prev');
  })
  $(".play").click(function() {
    owl.trigger('owl.play', 1000); //owl.play event accept autoPlay speed as second parameter
  })
  $(".stop").click(function() {
    owl.trigger('owl.stop');
  })

});

.img {
  display: inline-block;
  max-width: 100%;
  height: 130px;
  /* the problem (if you remove it, the carousel works !!!! )*/
  margin-bottom: 30px;
}
#owl-demo .item {
  color: #FFF;
  height: 250px;
  text-align: center;
  border: 1px solid rgb(228, 228, 228);
  border-radius: 0.6em;
  margin: 3px;
  background: #93C572;
}

--- --- EDITED

可能我不清楚问题是什么：

• 如果我不编辑旋转木马内部图像的高度，则可以正常工作 像第一张图片一样好。 （CSS在一个单独的文件中）
• 如果我尝试编辑旋转木马页面内图像的高度 像第二张图像一样变成空白。 （CSS在一个单独的文件中）

我对jQuery和JavaScript不太熟悉所以我不明白这种行为的原因是什么。

----编辑2 ----

此问题仅出现在 GOOGLE CHROME 中，而不是 INTERNET EXPLORER ，而不是 MOZILLA FIREFOX 。

Answer 1

我通过将图像的高度从 130px 更新为 135px 解决了这个问题，我只是随机找到了这个解决方案，但我仍然不明白背后的原因问题或解决方案。

旧CSS代码：

.img {  display: inline-block;  max-width: 100%;  height: 130px;    margin-bottom: 30px; }

新的CSS代码：

.img {  display: inline-block;  max-width: 100%;  height: *135px*;  margin-bottom: 30px;}