CSS -图像错误对齐和越界

Question

WordPress网站在一年多的时间里运行良好。也许，这是因为新的浏览器版本，对齐是关闭的。

​

​

正如您所看到的，每个图像都应该在其各自的边界框内，但它们现在是越界的。

HTML代码：

​

<div class="full-container commercial">
<div class="container">
<div id="content" class="clearfix row">
<div id="main" class="col col-lg-12 clearfix" role="main">
<article id="post-12" class="clearfix post-12 page type-page status-publish hentry" role="article">
<section class="post_content">
<h2>Community</h2>
<ul id="equalize" class="gallery_block commercial">
<p></p>
<li style="height: 601px;">
<span class="wp-easy-gallery">
<a style="cursor: pointer;" title="Senior Apartment" onclick="var images=['http://example.com/wp-content/uploads/2015/02/302-1.jpg', 'http://example.com/wp-content/uploads/2015/02/302-2.jpg', 'http://example.com/wp-content/uploads/2015/02/302-3.jpg', 'http://example.com/wp-content/uploads/2015/02/302-4.jpg']; var titles=['Senior Apartment', 'Senior Apartment', 'Senior Apartment', 'Senior Apartment']; var descriptions=['', '', '', '']; jQuery.prettyPhoto.open(images,titles,descriptions);">
<img class="dShadow trans" border="0" alt="Senior Apartment" src="http://example.com/wp-content/uploads/2015/02/302-1.jpg">
<p class="wpeg-gallery-name left">Senior Apartment</p>
</span>
</li>
<li style="height: 601px;">
<span class="wp-easy-gallery">
<a style="cursor: pointer;" title="Cultural Centre" onclick="var images=['http://example.com/wp-content/uploads/2015/02/412-1.jpg', 'http://example.com/wp-content/uploads/2015/02/412-2.jpg', 'http://example.com/wp-content/uploads/2015/02/412-3.jpg', 'http://example.com/wp-content/uploads/2015/02/412-4.jpg', 'http://example.com/wp-content/uploads/2015/02/412-5.jpg', 'http://example.com/wp-content/uploads/2015/02/412-6.jpg', 'http://example.com/wp-content/uploads/.../412-14.jpg']; var titles=['Cultural Centre', 'Cultural Centre', 'Cultural Centre', 'Cultural Centre', 'Cultural Centre', 'Cultural Centre', 'Cultural Centre', 'Cultural Centre', 'Cultural Centre', '', 'Cultural Centre', 'Cultural Centre', 'Cultural Centre', 'Cultural Centre']; var descriptions=['', '', '', '', '', '', '', '', '', '', '', '', '', '']; jQuery.prettyPhoto.open(images,titles,descriptions);">
<img class="dShadow trans" border="0" alt="Cultural Centre" src="http://example.com/wp-content/uploads/2015/02/412-1.jpg">
<p class="wpeg-gallery-name left">Cultural Centre</p>
</span>
</li>
<li style="height: 601px;">
<span class="wp-easy-gallery">
<a style="cursor: pointer;" title="Community Centre" onclick="var images=['http://example.com/wp-content/uploads/2015/02/541-1.jpg', 'http://example.com/wp-content/uploads/2015/02/541-2.jpg', 'http://example.com/wp-content/uploads/2015/02/541-3.jpg', 'http://example.com/wp-content/uploads/2015/02/541-4.jpg', 'http://example.com/wp-content/uploads/2015/02/541-5.jpg', 'http://example.com/wp-content/uploads/2015/02/541-6.jpg', 'http://example.com/wp-content/uploads/...Community Centre', 'Community Centre', 'Community Centre', 'Community Centre', 'Community Centre', 'Community Centre', 'Community Centre', 'Community Centre', 'Community Centre', 'Community Centre', 'Community Centre', 'Community Centre']; var descriptions=['', '', '', '', '', '', '', '', '', '', '', '', '', '']; jQuery.prettyPhoto.open(images,titles,descriptions);">
<img class="dShadow trans" border="0" alt="Community Centre" src="http://example.com/wp-content/uploads/2015/02/541-1.jpg">
</a>
<p class="wpeg-gallery-name left">Community Centre</p>
</span>
</li>
<li style="height: 601px;">
<li style="height: 601px;">
<li style="height: 601px;">
<p class="lead"></p>
</ul>
</section>
<footer>
</article>
</div>
</div>
</div>
</div

​

CSS：

​

.wp-easy-gallery {
    display: inline-block;
    float: left;
    margin-right: 5px;
}
.wp-easy-gallery a {
    box-shadow: none !important;
}
.wp-easy-gallery img {
    border: 1px solid #CCCCCC;
    display: inline-block;
    opacity: 0.7;
    padding: 2px;
    position: relative;
}
.wp-easy-gallery:hover img.dShadow {
    box-shadow: 2px 2px 5px #888888;
}
.wp-easy-gallery:hover img {
    opacity: 1;
}
.wp-easy-gallery img {
    transition: opacity 0.3s ease-in-out 0s;
}
.wpeg-gallery-name.center {
    text-align: center;
}
.wpeg-gallery-name.right {
    text-align: right;

​

这是由以前的程序员完成的。如果有人能让我们知道哪里可能出了问题，以及在哪里寻找，我们将不胜感激。

提前谢谢。

Answer 1

我已经有很长一段时间没有在CSS上工作了。谢谢你的帮助。

我已经将以下内容添加到.wp-easy gallery中

height: 100%;
width: 100%; 

和改变

<li style="height: 601px;"

至

<li>

在Firebug上，它开始很好地对齐。

因为我不熟悉WordPress，所以我想我需要试着去挖掘它，看看我可以在哪里改变它。由于不同的浏览器表现不同，我想我可以从这里开始，然后在不同的浏览器上测试它。