html/css：懸停時圖像略微偏移？

我設置了一個Wordpress頁面，其中顯示所有帖子的縮略圖以及相應帖子的標題，作爲帖子本身的鏈接。縮略圖圖像也是該帖子的鏈接。html/css：懸停時圖像略微偏移？

網站的最新版本可以在這裏看到：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-主題的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 */

我知道，這是一個非常具體項目的問題，但我根本無法弄清楚是什麼導致了這一點。非常感謝任何能夠幫助我的人。

來源

2017-08-10 JoSch

似乎一旦「過渡」被移除... – CBroe

@CBroe真的......但很奇怪。任何想法爲什麼它的行爲如此？ – JoSch

可能是四捨五入的結果......開發工具顯示我這些圖像爲'313.641px'寬，所以我想當計算不透明度時，它對下面的內容的影響，一些四捨五入到全像素值必須發生......簡單地給圖像一個背景顏色似乎修復它。 – CBroe

這是因爲瀏覽器正在做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; 
}

來源

2017-08-10 10:59:57

這使我在Chrome中修復了它。

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

來源

2017-08-10 10:55:45

html/css：懸停時圖像略微偏移？

回答

相關問題