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易畫廊

height: 100%; 
width: 100%; 

，改變

<li style="height: 601px;" 

到

<li> 

對螢火蟲

，它開始相吻合。

因爲我不熟悉WordPress，我想我需要嘗試深入研究，看看我可以在哪裏更改CSS。由於不同的瀏覽器行爲不同，我想我可以從這裏開始，然後在不同的瀏覽器上測試它。