html / css：悬停时图像略有变化？

时间：2017-08-10 10:44:33

标签： html css wordpress

我已经使用Wordpress设置了一个页面，其中显示所有帖子的缩略图以及相应帖子的标题作为帖子本身的链接。缩略图图像也是帖子的链接。

可在此处查看该网站的当前版本：http://udkdev.skopec.de/category/projekte/

有人可以向我解释一下，为什么所有的缩略图都会在悬停时稍微偏移？我以为我可能搞砸了边距，填充或边框，但经过网站的CSS多次，我无法弄清楚错误。这里是网站本身的代码以及主题的CSS：

<?php get_header(); ?>
</div>
<br>
<div class="wrapper-offset-fix wrapper-projekte">
<div class="projekte">

    <div class="button-group filters-button-group">
        <button class="active btn" id="all">alle</button>
        <button class="projekt-btn btn" id="category-wise-201516">WiSe 15/16</button>
        <button class="projekt-btn btn" id="category-sose-15">SoSe 15</button>
        <button class="projekt-btn btn" id="category-wise-201415">WiSe 14/15</button>
        <button class="projekt-btn btn" id="category-sose-14">SoSe 14</button>
        <button class="projekt-btn btn" id="category-wise-201314">WiSe 13/14</button>
        <button class="projekt-btn btn" id="category-sose-2013">SoSe 13</button>
        <button class="projekt-btn btn" id="category-wise-201213">WiSe 12/13</button>
        <button class="projekt-btn btn" id="category-sose-2012">SoSe 12</button>
    </div>


    <?php if (is_home()) {
    query_posts("cat=-3");
    } ?>

    <?php if (have_posts()): ?>
        <?php while(have_posts()): the_post(); ?>
        <div <?php post_class(); ?>>

            <p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
            <a href="<?php the_permalink(); ?>">
            <?php 
                if ( has_post_thumbnail() ) {
                the_post_thumbnail('large');
            } ?>
            </a>
        <!--<div class="meta">Tags: <?php the_tags( '', ', ', '<br />' ); ?> </div>-->
        </div>
        <?php endwhile; ?>
    <?php else : ?>
        <h2>Couldn’t find any articles!</h2>
    <?php endif; ?>
</div>

<script>
    var $btns = $('.btn').click(function() {

      if (this.id == 'all') {
        $('.projekte > .post').fadeIn(300);
      } else {
        var $el = $('.' + this.id).fadeIn(300);
        $('.projekte > .post').not($el).fadeOut(300);
      }
      $btns.removeClass('active');
      $(this).addClass('active');
    })
</script> 

<?php get_footer(); ?>

网站WP-Theme的CSS：

/* -------------------------------- Default WP classes */

* {

  /*cursor: url('kvscursor-01-4.png'), auto; */

  /*cursor: -webkit-image-set(url("kvscursor-01-4.png") 1x, url("kvscursor-01-4x2.png") 2x) 0 0, auto;*/
}

html {
  font-size: 62.5%; }

body {
  font-size: 1.7em;
  line-height: 1.5;
  letter-spacing: 0.6px;
  /*  background: #6f6;*/
  color: #fff;
  background: #111;
  /*  -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto; */
  }

a {
  color: white;
}


.wrapper {
  max-width: 100%;
  margin: 1em 1em 0 1em;
  position: relative; }

.wrapper h1 {
  font-family: 'News Gothic W01 Bold'; 

}

.wrapper a:link, a:visited {
  /*color: #fff;*/
  text-decoration: none; 
}

.post-navigation {
  /*display: flex;*/

  margin-top: 10em;
  max-width: 750px;
}

.post-navigation a, .top a, .back a {
  color: rgba(255, 255, 255, 1);
  border-bottom: 0px solid #ffffff;
  padding-bottom: 0px;
} 

.post-navigation a:hover, .top a:hover, .back a:hover {
  color: rgb(255, 255, 255);

  border-bottom: 1px solid #ffffff;
} 

.menu a {
  color: white
}

.menu a:hover {
  border-bottom: 1px solid white;
  /*padding-bottom: 0px;*/
}

.projekte a:link, a:visited {
  text-decoration: none; }

.projekte a: {
  /*border-bottom: 0px solid white;*/
}

.btn {
  margin-top: 7px;
  padding-bottom: 1px;
  color: white;
}

.btn:hover {
  border-bottom: 1px solid white;
  padding-bottom: 1px;

  cursor: pointer;
}


.projekt-btn {
  margin-top: 7px;
  padding-bottom: 1px;
  color: white;
}

.projekt-btn:hover {
  color: white;
  border-bottom: 1px solid white;
  padding-bottom: 1px;

  cursor: pointer;
}

.footer-left {
  float: left;
  margin-left: 0%;
}

.footer-center {
  float: right;
  margin-left: 0;
}

.footer-right {
  float: right;
  margin-right: 0;
}

/* NAVIGATION */
nav.menu .current-menu-parent a:link, nav.menu .current-menu-parent a:visited, nav.menu .current-menu-item a:link, nav.menu .current-menu-item a:visited {
  position: relative; }
  nav.menu .current-menu-parent a:link:after, nav.menu .current-menu-parent a:visited:after, nav.menu .current-menu-item a:link:after, nav.menu .current-menu-item a:visited:after {
    position: absolute;
    height: 1px;
    background: #fff;
    width: 100%;
    right: 0;
    display: block;
    content: "";
    margin-top: -2px;  
}
nav.menu li.menu-item {
  margin-right: 0.5em; }
/*   nav.menu li.menu-item:hover {
    position: relative; }
    nav.menu li.menu-item:hover:after {
      position: absolute;
      height: 0.5px;
      background: #fff;
      width: 100%;
      right: 0;
      display: block;
      content: "";
      margin-top: -2px; } */
nav.menu .menu-main_menu-container .menu li.menu-item {
  display: inline; }
nav.menu .menu-main_menu-container .menu li.home {
  display: block; }
  nav.menu .menu-main_menu-container .menu li.home a:link {
    font-family: 'News Gothic W01 Bold'; }
nav.menu .menu-main_menu-container .menu .sub-menu {
  display: none; }
nav.menu .sub-item li {
  display: inline; }

/* PAGE + BLOG*/
/*.content a {
  color: #fff;}*/
.content {
  margin-top: 1.5em; }
  .content h2 {
    font-family: 'News Gothic W01 Bold';
    margin-bottom: 1.5em; }
    .content h2 a:link {
      font-family: 'News Gothic W01 Bold'; }
  .content p {
    margin-bottom: 1.5em;
    max-width: 700px; }
  .content ul.page-list {
    list-style: disc;
    margin-left: 1em; }
  .content .post {
    width: 100%; }
    .content .post img.wp-post-image {
      margin-bottom: 1.5em; }
    .content .post p img.alignnone {
      max-width: 55vw;
      height: auto;
      margin-bottom: 0.5em; }
    .content .post .wp-caption {
      font-family: 'LetterGothicW01-Regular';
      margin: 1.5em 0; }
  .content .page {
    position: relative; }
    .content .page .alignnone {
      position: relative;
      width: 100% !important; }
      .content .page .alignnone img {
        width: 100%;
        max-width: 1000px;
        height: auto; }

/* STUDIERENDE */


.wrapper-studierende {
  margin: 0 0em; }
  .wrapper-studierende .button-group {
    margin: 0 0 1.5em 0; }
    .wrapper-studierende .button-group button {
      background: none;
      margin-right: 1.5em; 
      border-bottom: 1px solid black;
    }
      .wrapper-studierende .button-group button:hover {
        position: relative; 
        border-bottom: 1px solid white;
      }
        .wrapper-studierende .button-group button:hover:after {
          position: absolute;
          height: 1px;
          background: black;
          width: 100%;
          right: 0;
          display: block;
          content: "";
          margin-top: -5px; }
      .wrapper-studierende .button-group button:focus {
        outline: 0; 
        text-decoration: none;
      }
    .wrapper-studierende .button-group button.active {
      position: relative; 
      border-bottom: 1px solid white;
      text-decoration: none;
    }
      .wrapper-studierende .button-group button.active:after {
        position: absolute;
        height: 1px;
        background: black;
        width: 100%;
        right: 0;
        display: block;
        content: "";
        margin-top: -5px; 
        text-decoration: none;
      }
  .wrapper-studierende .post {
    width: 23.25%;
    float: left;
    margin-right: 2.3%;
    margin-bottom: 2.3%; }
    .wrapper-studierende .post h2 a:link {
      font-family: 'News Gothic W01 Bold'; }
    .wrapper-studierende .post:hover h2 a:link, .wrapper-projekte .post:hover h2 a:visited {
      position: relative; }
      .wrapper-studierende .post:hover h2 a:link:after, .wrapper-projekte .post:hover h2 a:visited:after {
        position: absolute;
        height: 1px;
        background: black;
        width: 100%;
        right: 0;
        display: block;
        content: "";
        margin-top: -5px; }
    .wrapper-studierende .post:nth-child(4n+1) {
      margin-right: 0; }

    .wrapper-studierende .post img {
      width: 100%;
      height: auto;

      transition: all 400ms;
    }

    .wrapper-studierende .post img:hover {
      /*opacity: 0.8;*/
    }

    .wrapper-studierende .post .meta {
      font-family: 'LetterGothicW01-Regular'; }
      .wrapper-studierende .post .meta a:link {
        font-family: 'LetterGothicW01-Regular'; }
  .wrapper-studierende .navigation {
    display: none; }


.content-studierende {
  margin-top: 1em;
}
.content-studierende a:hover {
  border-bottom: 1px solid white;
}
.content-studierende h2 {
  margin-bottom: 1.5em; 
}

/*  .content-studierende h2 a:link {
    font-family: 'News Gothic W01 Bold'; 
  }*/

.content-studierende .columns {
  margin-bottom: 1.5em; 
}
  .content-studierende .columns p a:link:after {
    content: '\0020\2192'; 
  }
.content-studierende img {
  margin-bottom: 1.5em; 
}

/* PROJEKTE */

.wrapper-offset-fix {
  /*margin: 0 1em;*/
  transform: translate(1em, 0);
}

.wrapper-projekte {
  margin: 0 0em; }
  .wrapper-projekte .button-group {
    margin: 0 0 1.5em 0; }
    .wrapper-projekte .button-group button {
      background: none;
      margin-right: 1.5em; 
      border-bottom: 1px solid black;
    }
      .wrapper-projekte .button-group button:hover {
        position: relative; 
        border-bottom: 1px solid white;
      }
        .wrapper-projekte .button-group button:hover:after {
          position: absolute;
          height: 1px;
          background: black;
          width: 100%;
          right: 0;
          display: block;
          content: "";
          margin-top: -5px; }
      .wrapper-projekte .button-group button:focus {
        outline: 0; 
        text-decoration: none;
      }
    .wrapper-projekte .button-group button.active {
      position: relative; 
      border-bottom: 1px solid white;
      text-decoration: none;
    }
      .wrapper-projekte .button-group button.active:after {
        position: absolute;
        height: 1px;
        background: black;
        width: 100%;
        right: 0;
        display: block;
        content: "";
        margin-top: -5px; 
        text-decoration: none;
      }
  .wrapper-projekte .post {
    width: 23.25%;
    float: left;
    margin-right: 2.3%;
    margin-bottom: 2.3%; }
    .wrapper-projekte .post h2 a:link {
      font-family: 'News Gothic W01 Bold'; }
    .wrapper-projekte .post:hover h2 a:link, .wrapper-projekte .post:hover h2 a:visited {
      position: relative; }
      .wrapper-projekte .post:hover h2 a:link:after, .wrapper-projekte .post:hover h2 a:visited:after {
        position: absolute;
        height: 1px;
        background: black;
        width: 100%;
        right: 0;
        display: block;
        content: "";
        margin-top: -5px; }
    .wrapper-projekte .post:nth-child(4n+1) {
      margin-right: 0; }

    .wrapper-projekte .post img {
      width: 100%;
      height: auto;

      transition: all 400ms;
    }

    .wrapper-projekte .post img:hover {
      opacity: 0.8;
    }

    .wrapper-projekte .post .meta {
      font-family: 'LetterGothicW01-Regular'; }
      .wrapper-projekte .post .meta a:link {
        font-family: 'LetterGothicW01-Regular'; }
  .wrapper-projekte .navigation {
    display: none; }

.post-link {
  margin-bottom: 1%;
}

.post-link p:hover {
  text-decoration: underline;
}

/* ----------------------------------------------------- smartphonish screens */
@media only screen and (max-width: 767px) {
  .wrapper {
    margin: 0.5em 0.5em 0 0.5em; }
    .wrapper p, .wrapper .post {
      width: 100%; }
      .wrapper p img, .wrapper .post img {
        width: 100%;
        height: auto; }

  .content p img.alignnone {
    max-width: 100% !important; }

  .wrapper-projekte {
    margin: 0 0.5em 0.5em 0.5em; }

  .wrapper-projekte .post {
    float: none;
    width: 100%;
    margin-bottom: 1.5em; }

  .wp-caption {
    width: 100% !important; }
    .wp-caption p.wp-caption-text {
      font-family: 'LetterGothicW01-Regular'; }
    .wp-caption img {
      width: 100%;
      height: auto; }

  .page img {
    max-width: 100% !important; } }
/* ----------------------------------------------------- desktopish screens */
@media only screen and (min-width: 1024px) {
  .content-studierende h2 {
    margin-bottom: 1.5em; }
    .content-studierende h2 a:link {
      font-family: 'News Gothic W01 Bold'; }
  .content-studierende .columns {
    margin-bottom: 1.5em;
    max-width: 700px;
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3; }
    .content-studierende .columns p {
      margin-bottom: 1.5em; }
  .content-studierende img {
    margin-bottom: 1.5em; }

  .content p img.aligncenter {
    max-width: 55vw !important;
    height: auto; } }
/* -------------------------------- Browser specific CSS */
/* apply only on JavaScript enabled browsers */
/* apply only on Internet Explorer 8 */
/* apply only on Internet Explorer 9 */

/*# sourceMappingURL=style.css.map */

我知道这是一个非常针对具体项目的问题，但我无法弄清楚造成这种情况的原因。非常感谢能帮助我的人。

2 个答案:

答案 0 :(得分：2)

这在Chrome中为我修复了它。

.wrapper-projekte .post img {
    width: 100%;
    height: auto;
    transition: all 400ms;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);

答案 1 :(得分：1)

这是因为浏览器正在进行antialiasing。将backface-visibility: hidden;设置为.wrapper-projekte .post img即可解决此问题。

.wrapper-projekte .post img {
    width: 100%;
    height: auto;
    transition: all 400ms;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
相关问题
最新问题