html - 将鼠标悬停在 Chrome 上时 CSS 图像会移动

Question

当我将鼠标悬停在我的任何图像上时，它会稍微向右移动。这只发生在 Chrome 上。所有其他浏览器都很好。我的网站是http://toarumajutsunoindex.me/谁能告诉我如何解决这个问题？

Answer 1

验证是你最好的朋友，你缺少一个结束div标签：

<li>
  <div class="box-images">
    <a href="http://toarumajutsunoindex.me/2394/"><img
      src="http://24.media.tumblr.com/a9f90ae6e9476ab04373a71501d97755/tumblr_mps7c973tK1rfyftbo1_250.jpg" width="225"
      alt=""/></a>

    <div class="smallinfo">
      <div class="box-date">November 2, 2013</div>
      <div class="likebox">
        <div id="post-ratings-2394" class="post-ratings" data-nonce="f404e6ef4d"><img id="rating_2394_1"
                                                                                      src="http://toarumajutsunoindex.me/wp-content/plugins/wp-postratings/images/heart/rating_1_off.gif"
                                                                                      alt="1 Like" title="1 Like"
                                                                                      onmouseover="current_rating(2394, 1, '1 Like');"
                                                                                      onmouseout="ratings_off(0, 0, 0);"
                                                                                      onclick="rate_post();"
                                                                                      onkeypress="rate_post();"
                                                                                      style="cursor: pointer; border: 0px;"/>
        </div>
        <div id="post-ratings-2394-loading" class="post-ratings-loading"><img
            src="http://toarumajutsunoindex.me/wp-content/plugins/wp-postratings/images/loading.gif" width="16"
            height="16" alt="Loading ..." title="Loading ..." class="post-ratings-image"/>&nbsp;Loading ...
        </div>
      </div>
    </div>
  </div><!--/.This closing tag was missing-->
</li>

更新：

好的，事实证明下面的错误不是导致问题的错误。

根据此主题，此问题似乎是 Chrome 错误，设置position:relative为内部img解决了该问题（至少在您的情况下）。