图像在 chrome 中重叠

Question

我正在使用免费模板来构建网站。模板很棒。但我意识到图像在 chrome 浏览器中重叠。

应该是这样的；

但实际情况是；

我认为这是一个 js 问题，但我不知道如何解决它。我怎样才能让它在 chrome 中也能工作？

编辑：抱歉忘记添加代码

<div class="container page-content">

			<!-- #options -->
			<div id="container" class="row portfolio-grid-textblock">
				<div class="col-md-4 col-sm-6 element wordpress ui-design" data-symbol="Mg" data-category="wordpress">
					<a href="portfolio-item-style2.html">
					<div class="image-link">
						<img alt="Reponsive Style" src="img/PortfolioImg/astrolojiler-home.jpg"/>
					</div>
					<div class="portfolio-texbox">
						<h5>ASTROLOJİLER</h5>
						<p>
							Burç yorumları, yükselen burçlar, çin astrolojisi, hint astrolojisi...
						</p>
					</div>
					</a>
				</div>
				<div class="col-md-4 col-sm-6 element actinoid bootstrap" data-symbol="U" data-category="actinoid">
					<a href="portfolio-item-style2.html">
					<div class="image-link">
						<img alt="Reponsive Style" src="img/PortfolioImg/numeroloji-home.jpg"/>
					</div>
					<div class="portfolio-texbox">
						<h5>NÜMEROLOJİ</h5>
						<p>
							Sayı bilimi, aşk uyumu ve harflere karşılık gelen rakamlar...
						</p>
					</div>
					</a>
				</div>
				<div class="col-md-4 col-sm-6 element lanthanoid bootstrap" data-symbol="Gd" data-category="lanthanoid">
					<a href="portfolio-item-style2.html">
					<div class="image-link">
						<img alt="Reponsive Style" src="img/PortfolioImg/fallar-home.jpg"/>
					</div>
					<div class="portfolio-texbox">
						<h5>FALLAR</h5>
						<p>
							Kahve falı, tarot falı, el falı, renk falı, zar falı, çiçek falı, niyet falı ve daha birçok fal...
						</p>
					</div>
					</a>
				</div>
				<div class="col-md-4 col-sm-6 element wordpress ui-design" data-symbol="Y" data-category="wordpress">
					<a href="portfolio-item-style2.html">
					<div class="image-link">
					<a href="portfolio-item-style2.html">
					<div class="image-link">
						<img alt="Reponsive Style" src="img/PortfolioImg/biyoritim-home.jpg"/>
					</div>
					<div class="portfolio-texbox">
						<h5>BİYORİTİM</h5>
						<p>
							Biyoritim değerlerinizi günlük olarak görmek için buraya tıklayın...
						</p>
					</div>
					</a>	
					</div>
					
				</div>
				<div class="col-md-4 col-sm-6 element" data-symbol="B" data-category="ui-design">
					<a href="portfolio-item-style2.html">
					<div class="image-link">
						<img alt="Reponsive Style" src="img/PortfolioImg/ruya-tabirleri-home.jpg"/>
					</div>
					<div class="portfolio-texbox">
						<h5>RÜYA TABİRLERİ</h5>
						<p>
							Rüyanızda gördüğünüz şeyler ne anlama geliyor öğrenmek için tıklayın...
						</p>
					</div>
					</a>
				</div>
				<div class="col-md-4 col-sm-6 element wordpress ui-design" data-symbol="Fe" data-category="wordpress">
					<a href="portfolio-item-style2.html">
					<div class="image-link">
						<img alt="Reponsive Style" src="img/PortfolioImg/karakter-analizi-home.jpg"/>
					</div>
					<div class="portfolio-texbox">
						<h5>KARAKTER ANALİZİ</h5>
						<p>
							Nasıl bir karakteriniz var? Karakterinizi belirleyen etkenler nelerdir?...
						</p>
					</div>
					</a>
				</div>
			</div><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- ae-yeni-alt -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-2108313464701654"
     data-ad-slot="9514974529"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
		</div>
		
		<!-- Dotted line between footer -->
		<hr class='dotted'/>
		<footer class="below-footer">
		<div class="container ">
			<div class="pull-right smalllogo">
				<div>
					<!--<a href="http://themifycloud.com/downloads/skyway-responsive-html5-template/"><i class="fa fa-dot-circle-o"></i> SkyWay</a>-->
				</div>
			</div>
			<a id="scrolltotop" href="#" class="btn btn-default btn-sm"><i class="fa fa-angle-up fa-2x"></i></a>
			<p>
				&copy; 2011-2015 AstroEnerji.com &nbsp;&nbsp;<a href="http://www.astroenerji.com" class="primary-color">Kullanım Koşulları</a>&nbsp; |&nbsp; <a href="http://www.astroenerji.com" class="primary-color">Gizlilik Bildirimi</a>
			</p>
		</div>
		</footer>
		<!-- End of footer -->
	</div>
</div>
</div>
<!-- Bootstrap core JavaScript
    ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.js"></script>
<script src="js/jquery.prettyPhoto.js"></script>
<script src="vendor/isotope/jquery.isotope.min.js"></script>
<script src="vendor/isotope/js/fake-element.js"></script>
<script src="js/site.js"></script>

Answer 1

你在第 4 个盒子里发生了一些奇怪的事情——带有 data-symbol="Y" 的那个

<div class="col-md-4 col-sm-6 element wordpress ui-design" data-symbol="Y" data-category="wordpress">
    =>   <a href="portfolio-item-style2.html">
    =>   <div class="image-link">**
       <a href="portfolio-item-style2.html">
       <div class="image-link">
          <img alt="Reponsive Style" src="img/PortfolioImg/biyoritim-home.jpg"/>
       </div>
       <div class="portfolio-texbox">
          <h5>BİYORİTİM</h5>
          <p>Biyoritim değerlerinizi günlük olarak görmek için buraya tıklayın...</p>
       </div>
       </a> 
        </div>
 **extra div here => </div>

如果你去掉我在前面放一个 => 的那两行，那应该可以解决它。

我认为您在该块的末尾还有一个额外的标签。也删除它。

如果这不能解决问题，那么我们需要在完整的 html 页面、bootply、jsfiddle 或您的服务器等上查看问题。