javascript - Flexslider IMG 在 768px 及以下设置为 0x0

Question

我有一个 flexslider，它在 769px 和更大的媒体查询中工作得很好，但是一旦视口(viewport)达到 768px 宽，flexslider 中的 IMG 就会在 Chrome 检查器中显示为 0x0 大小。检查器中没有将 IMG 设置为 0x0

http://70e-solutions.mybigcommerce.com/

这里是被调用的完整代码:

<div id="ibSlideShow">
  <div class="inner">
    <div class="Content Widest" id="LayoutColumn1">
      <script type="text/javascript" src="javascript/jquery/plugins/jquery.flexslider.js"></script>
      <script type="text/javascript">
        $(window).load(function() {
          $('.slide-show').flexslider({
            slideshowSpeed: $('.slide-show').attr('data-swap-frequency') * 1000,
            animation: "slide",
            pauseOnHover: true,
            controlNav: true,
            directionNav: true
          });
        });
      </script>

      <div class="slide-show slide-show-render slide-show-render-full flexslider Panel" data-swap-frequency="1000" id="HomeSlideShow">
    	<ol class="slides">
          <li class="slide clone">
            <a href="#">
              <div class="slide-content">
				<div class="slide-overlay">
					<h2 class="slide-heading" style="color: #ffffff"></h2>
					<p class="slide-text" style="color: #ffffff"></p>
					<div class="slide-button" style="display:none; visibility: hidden"><span class="btn" style="color: #ffffff"></span></div>
				</div>
				<span class="slide-image-wrapper">
					<img class="slide-image" src="http://cdn6.bigcommerce.com/s-y4b1n34/product_images/theme_images/slide_2.jpg?t=1416519561" alt="">
				</span>
		      </div>
	        </a>
          </li>
		  <li class="slide">
            <a href="">
              <div class="slide-content">
				<div class="slide-overlay">
					<h2 class="slide-heading" style="color: #ffffff"></h2>
					<p class="slide-text" style="color: #ffffff"></p>
					<div class="slide-button" style="display:none; visibility: hidden"><span class="btn" style="color: #ffffff"></span>
                    </div>
				</div>
				<span class="slide-image-wrapper">
					<img class="slide-image" src="http://cdn6.bigcommerce.com/s-y4b1n34/product_images/theme_images/slide_1.jpg?t=1416519561" alt="">
                </span>
              </div>
            </a>
          </li>
          <li class="slide">
				<a href="">
					<div class="slide-content">
							<div class="slide-overlay">
								<h2 class="slide-heading" style="color: #ffffff"></h2>
								<p class="slide-text" style="color: #ffffff"></p>
								<div class="slide-button" style="display:none; visibility: hidden"><span class="btn" style="color: #ffffff"></span></div>
							</div>
							<span class="slide-image-wrapper">
								<img class="slide-image" src="http://cdn6.bigcommerce.com/s-y4b1n34/product_images/theme_images/slide_2.jpg?t=1416519561" alt="">
							</span>
					</div>
				</a>
			</li>
		</ol>
      </div>
    </div>
  </div>
</div>

Answer 1

在 responsive.css?t=1416605492 你有

/* 768px */
@media screen and (max-width: 768px) {

    /* Hide */

    #HomeSlideShow,
    #ProductBreadcrumb,
    .productlist-page .Left {
        display: none;
    }

#HomeSlideShow 设置为不可见从此部分删除#HomeSlideShow