javascript - 画廊 - dl、dt、dd - 未正确显示

Question

在为问题设置标题时遇到一些问题。但问题是 3 列图库在以下浏览器中无法正确显示:

Windows:

• 火狐浏览器

适用于 Chrome 和 Internett Explorer。

苹果机:

• Chrome
• Safari

尚未找到任何可以正常工作的浏览器。

该画廊使用基本的 WordPress 运行，因此它不是我开发的。因此它应该适用于所有平台？

不确定我应该从哪里开始寻找问题。

我尝试删除检查器中的一些图像，这是我发现的:

• 8幅作品
• 9 张图片不起作用
• 10-11 张图片作品
• 12-13 张图片不起作用

我还发现其他画廊工作正常。 Example .

我在下面添加了一些 HTML，所以您可能会发现一个错误。 Demo对于这个问题。

<div id='gallery-2' class='gallery galleryid-1349 gallery-columns-3 gallery-size-thumbnail'>
    <dl class='gallery-item'>
        <dt class='gallery-icon portrait'>
            <a href='http://annettemartens.com/wp-content/uploads/2013/08/IMG_22574.jpg' data-rel="lightbox-gallery-2"><img width="300" height="300" src="http://annettemartens.com/wp-content/uploads/2013/08/IMG_22574-300x300.jpg" class="attachment-thumbnail size-thumbnail" alt="The Joy of Life" aria-describedby="gallery-2-680" srcset="http://annettemartens.com/wp-content/uploads/2013/08/IMG_22574-300x300.jpg 300w, http://annettemartens.com/wp-content/uploads/2013/08/IMG_22574-768x768.jpg 768w, http://annettemartens.com/wp-content/uploads/2013/08/IMG_22574-1024x1024.jpg 1024w" sizes="(max-width: 300px) 100vw, 300px" /></a>
        </dt>
        <dd class='wp-caption-text gallery-caption' id='gallery-2-680'>
            Title
        </dd>
    </dl>
    <dl class='gallery-item'>
        <dt class='gallery-icon portrait'>
            <a href='http://annettemartens.com/wp-content/uploads/2013/08/IMG_3772.jpg' data-rel="lightbox-gallery-2"><img width="300" height="300" src="http://annettemartens.com/wp-content/uploads/2013/08/IMG_3772-300x300.jpg" class="attachment-thumbnail size-thumbnail" alt="Abandoned Garden I" aria-describedby="gallery-2-448" /></a>
        </dt>
        <dd class='wp-caption-text gallery-caption' id='gallery-2-448'>
            Title
        </dd>
    </dl>
    <dl class='gallery-item'>
        <dt class='gallery-icon landscape'>
            <a href='http://annettemartens.com/wp-content/uploads/2013/08/IMG_30962.jpg' data-rel="lightbox-gallery-2"><img width="300" height="300" src="http://annettemartens.com/wp-content/uploads/2013/08/IMG_30962-300x300.jpg" class="attachment-thumbnail size-thumbnail" alt="Celestian Visitant" aria-describedby="gallery-2-955" /></a>
        </dt>
        <dd class='wp-caption-text gallery-caption' id='gallery-2-955'>
            Title
        </dd>
    </dl>
    <br style="clear: both" />
    <!-- And so on  -->
</div>

有什么想法吗？

Answer 1

当你有不同高度的 float 元素时，就会发生这种情况:

#wrapper {
  width: 400px;
  border: 1px solid blue;
  overflow: hidden;
}
.item {
  width: 198px;
  height: 198px;
  border: 1px solid;
  float: left;
  background: yellow;
}
.item:first-child {
  height: 210px;
}

<div id="wrapper">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

避免这种情况的一种方法是在每行之后使用间隙。看来您已经在使用 br 来实现这一点。

#wrapper {
  width: 400px;
  border: 1px solid blue;
  overflow: hidden;
}
.item {
  width: 198px;
  height: 198px;
  border: 1px solid;
  float: left;
  background: yellow;
}
.item:first-child {
  height: 210px;
}
#wrapper > br {
 clear: left;
}

<div id="wrapper">
  <div class="item"></div>
  <div class="item"></div>
  <br />
  <div class="item"></div>
  <div class="item"></div>
</div>

问题是您的 br 未显示，因为

.gallery br {
  display: none;
}

那么他们就无法清除。只需删除该样式，或者不使用 float 。