Question

有谁能告诉我为什么caroufredsel（#imagec）在Firefox中不可见？它应该与#mainimg重叠并保留在#wrapper div的底部。它出现在所有其他浏览器中。如果我把顶部：0;在#imagec的CSS中它确实出现并保持附着在#wrapper的顶部，但是如果我给出顶部任何其他数字#imagec不再可见。

＆＃13;

    $(document).ready(function() {
      var firstimg = "images/1.bmp"
      $('#mainimg').attr("src", firstimg);
      carousel();
    });

    function carousel() {
      $('#imagec').carouFredSel({
        align: "center",
        auto: true,
        items: {
          visible: 5,
          height: '60%'
        },
        responsive: true,
        width: '100%',
        height: '60%',
        scroll: {
          items: 1,
          duration: 2000,
          timeoutDuration: 0,
          easing: 'linear',
          pauseOnHover: 'immediate'
        }
      });
    }

＆＃13;

    html,
    body {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
      display: -webkit-box;
      display: inline-flex;
      -webkit-flex-direction: column;
      flex-direction: column;
      -webkit-box-orient: vertical;
      -webkit-align-items: center;
      align-items: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      position: relative;
    }

    #wrapper {
      width: 65%;
      height: auto;
      position: relative;
      overflow: hidden;
      border: 10px double black;
    }

    #mainimg {
      position: relative;
    }

    #imagec {
      padding-top: 8px;
      position: absolute;
      bottom: 0;
      z-index: 1001;
    }

    #imagec div {
      float: left;
      display: block;
    }

    #imagec div img {
      border: none;
      -webkit-box-shadow: 0px 5px 6px 0px rgba(0, 0, 0, 0.5);
      -moz-box-shadow: 0px 5px 6px 0px rgba(0, 0, 0, 0.5);
      box-shadow: 0px 5px 6px 0px rgba(0, 0, 0, 0.5);
      -webkit-transition: box-shadow 0.5s, -webkit-box-shadow 0.5s;
      transition: box-shadow 0.5s, -webkit-box-shadow 0.5s;
    }

    #imagec div img:hover {
      -webkit-box-shadow: 0px 5px 6px 0px rgba(200, 200, 200, 0.5);
      box-shadow: 0px 5px 6px 0px rgba(200, 200, 200, 0.5);
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script>

<div id="title">
  <strong>Photography & Design</strong>
</div>
<ul id="main">
  <li class="main" id="start">Portfolio
    <ul id="second">
      <li><a href="#">Portraits</a>
      </li>
      <li><a href="#">Fashion</a>
      </li>
      <li><a href="#">Events</a>
      </li>
      <li><a href="#">Weddings</a>
      </li>
      <li class="last"><a href="#">Designs</a>
      </li>
    </ul>
  </li>
  <li class="main">Blog</li>
  <li class="main">Contact</li>
  <li class="main" id="end">About</li>
</ul>
<div id="wrapper">
  <img src="" id="mainimg" width="100%" height="auto">
  <div id="imagec">
    <div>
      <img class='smallimg' src='images/1.bmp' width='75%'>
    </div>
    <div>
      <img class='smallimg' src='images/2.bmp' width='75%'>
    </div>
    <div>
      <img class='smallimg' src='images/3.bmp' width='75%'>
    </div>
    <div>
      <img class='smallimg' src='images/4.bmp' width='75%'>
    </div>
    <div>
      <img class='smallimg' src='images/5.bmp' width='75%'>
    </div>
    <div>
      <img class='smallimg' src='images/6.bmp' width='75%'>
    </div>
    <div>
      <img class='smallimg' src='images/7.bmp' width='75%'>
    </div>
  </div>
</div>

＆＃13;

Answer 1

问题出现在CSS中，以防将来有人遇到此问题。 Caroufredsel添加了一个包装器，我不得不覆盖“顶部”并向#imagec div添加一些东西。

CSS

.caroufredsel_wrapper {
  top: auto !important;
}
#imagec {
  padding-top: 8px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: auto;
  margin: auto;
  padding: 0;
  z-index: 1001;
}

在Firefox中看不到Caroufredsel

1 个答案: