Question

设置问题的标题有些麻烦。但问题是3列图库在以下浏览器中无法正确显示：

窗：

火狐

适用于Chrome和Internett Explorer。

的Mac：

铬
Safari浏览器

未找到任何可正常运行的浏览器。

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

不确定我应该从哪里开始搜索问题。

我尝试删除Inspector中的一些图像，这是我发现的：

8张图片
9张图片不起作用
10-11张图片
12-13图像不起作用

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

我在下面添加了一些HTML，所以也许你看到了一个bug。问题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

当你有不同高度的浮动元素时会发生这种情况：

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

避免它的一种方法是在每行之后使用间隙。您似乎已经在使用br了。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

问题是由于

而未显示br

.gallery br {
  display: none;
}

然后他们无法清除。只需删除该样式，或者不要使用浮动。

图库 - dl，dt，dd - 无法正确显示

1 个答案: