javascript - Flexslider 在加载时下推内容

Question

我的主页有不同的部分，上面有 anchor 标记。其中一个部分包含一个全宽的“flexslider” slider 。当我从另一个页面链接到 slider 下方主页上的任何 anchor 时，视口(viewport)最初会转到正确的位置。但是，当 flexslider 加载时，它会将所有内容都向下推。

我通过为 flexslider 容器定义一个固定的宽度和高度来解决这个问题，但这不是一个有效的解决方案，因为我的网站是响应式的。

任何解决方案将不胜感激，我一整天都在处理这个问题。

编辑:标记:

<div class="flexslider">
    <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    </ul>
 </div>

CSS:

/* FlexSlider Necessary Styles
*********************************/
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide      the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

当我为 .flexslider 类设置固定高度时，加载 slider 时页面不会偏移，但显然没有响应。我尝试改用 max-height，但这并没有为 slider “保留”空间。

Answer 1

在您的代码中，将 height 和 width 的所有实例替换为 max-height 和 max-width .即使在响应式网站上，这也不应将内容推出最大边界。

如果您需要更具体的帮助，请将您当前的代码编辑到您的问题中。