Question

我想我在firefox中发现了一个奇怪的错误。

当我在具有background-size属性的div上有一个悬停类（不透明度发生变化）时，在背景中使用的某些图像的大小会在水平或垂直方向上改变一个像素。

我在这里提出了一个问题的例子： http://jsfiddle.net/xz4F8/

html：

    <div class="group cont_tutto">
<div class="conteiner_articoli_cinema">
  <div class="back_navigazione_articoli-mag">
    <div class="articolo_mag">
      <div class="tipo-articoli-mag">speciale cinema</div>
      <a href="http://www.google.it">
        <div class="articolo_mag_cover" style="background-image:url('http://pu2.everyeye.it/public/immagini/16072013/Now-You-See-Me--I-maghi-del-crimine_articolo.jpg')"></div>
        </a>
      <div class="mag_titolo">
        <h2><a href="/pc/articoli/stealth-bastard-deluxe_recensione_18438" title="Stealth Bastard Deluxe">the lone ranger </a></h2>
      </div>
    </div>
    <div class="articolo_mag">
<div class="tipo-articoli-mag">speciale cinema</div>
<a href="http://www.google.it">

<div class="articolo_mag_cover" style="background-image:url('http://pu2.everyeye.it/public/immagini/16072013/theloneranger384470.jpg')"></div>
</a>
<div class="mag_titolo">
        <h2><a href="/pc/articoli/stealth-bastard-deluxe_recensione_18438" title="Stealth Bastard Deluxe">the lone ranger </a></h2>
      </div>
    </div>
<div class="articolo_mag">
  <div class="tipo-articoli-mag">rcensione fumetti</div>
  <a href="http://www.google.it">
    <div class="articolo_mag_cover" style="background-image:url('http://pu2.everyeye.it/public/immagini/16072013/Nodo-alla-gola_articolo.jpg')"></div>
    </a>
<div class="mag_titolo">
        <h2><a href="/pc/articoli/stealth-bastard-deluxe_recensione_18438" title="Stealth Bastard Deluxe">the lone ranger </a></h2>
      </div></div>
<div class="articolo_mag">
  <div class="tipo-articoli-mag">recensione cinema</div>
  <a href="http://www.google.it">
    <div class="articolo_mag_cover" style="background-image:url('http://pu2.everyeye.it/public/immagini/15072013/Distribuzione-cinema-e-dvd_articolo.jpg')"></div>
    </a>
  <div class="mag_titolo">
        <h2><a href="/pc/articoli/stealth-bastard-deluxe_recensione_18438" title="Stealth Bastard Deluxe">the lone ranger </a></h2>
      </div>
</div>
<div class="articolo_mag">
  <div class="tipo-articoli-mag">recensione serie tv</div>
  <a href="http://www.google.it">
    <div class="articolo_mag_cover" style="background-image:url('http://pu2.everyeye.it/public/immagini/08072013/trueblood-stagione6309717.jpg')"></div>
    </a>
<div class="mag_titolo">
        <h2><a href="/pc/articoli/stealth-bastard-deluxe_recensione_18438" title="Stealth Bastard Deluxe">the lone ranger </a></h2>
      </div>
</div>
<div class="articolo_mag">
  <div class="tipo-articoli-mag">recensione blu-ray</div>
  <a href="http://www.google.it">
    <div class="articolo_mag_cover" style="background-image:url('http://pu2.everyeye.it/public/immagini/13072013/ax967523.jpeg')"></div>
    </a>
<div class="mag_titolo">
        <h2><a href="/pc/articoli/stealth-bastard-deluxe_recensione_18438" title="Stealth Bastard Deluxe">the lone ranger </a></h2>
      </div>
</div>
<div class="articolo_mag">
  <div class="tipo-articoli-mag">recensione cinema</div>
  <a href="http://www.google.it">
    <div class="articolo_mag_cover" style="background-image:url('http://pu2.everyeye.it/public/immagini/12072013/lareligiosa825433.jpg')"></div>
    </a>
 <div class="mag_titolo">
        <h2><a href="/pc/articoli/stealth-bastard-deluxe_recensione_18438" title="Stealth Bastard Deluxe">the lone ranger </a></h2>
      </div>
</div>
</div>
</div>
</div>

css：

@charset "utf-8";
/* CSS Document */


.articolo_mag {
    background-color: #EFEFEF;
    float: left;
    width: 129px;
    margin-right: 6px;
}

.articolo_mag_cover {
    width: 129px;
    height: 177px;
    background-size:129px 177px;
    background-color: #333;
}


.articolo_mag_cover:hover {
    background-size:129px 177px;
    opacity: 0.9;}

.mag_titolo {}
.mag_titolo h2 {display: table-cell;
    vertical-align: middle;
    background-color: #FFF;
    font-size: 10px;
    font-family: Lato, Arial;
    font-weight: bold;
    border: 1px solid #D9D9D9;
    text-align: center;
    text-transform: uppercase;
    padding-top: 0px;
    padding-bottom: 0px;
    height: 30px;}

.mag_titolo h2:hover {  color: #09F;
    background-color: #E4E4E4;}

.mag_titolo h2 a {
    display: block;
    color: #000000;
    text-decoration: none;
    text-transform: uppercase;
    width: 119px;
    line-height: normal;
    padding-right: 4px;
    padding-left: 4px;
    padding-bottom: 0px;

}
.tipo-articoli-mag {
    background-color: rgba(0,0,0,0.75);
    height: 17px;
    width: 115px;
    color: #FFF;
    font-family: Lato, Arial;
    font-size: 10px;
    font-weight: bold;
    padding-top: 3px;
    padding-left: 5px;
    text-transform: uppercase;
    left: 5px;
    z-index: 25;
    position: relative;
    float: left;
    margin-top: 150px;
}

如果我使用封面选项作为背景大小，大小问题似乎减弱了，但是，一些图像在更新页面或悬停状态期间开始闪烁（在我看来，firefox不能决定女巫是正确的图像大小）

似乎问题是由div容器触发的，我用来将我页面中的所有内容（cont_tutto）居中，其宽度为951像素。

所有其他浏览器都没问题！

Answer 1

您必须添加“-moz-backface-visibility：hidden”来解决问题。以下是解决方案：http://nickpye.com/2013/04/03/css3-opacity-transition-image-wiggle-bug-in-mozilla-firefox/

Answer 2

尝试添加

transform: rotate(360deg);

就像我对悬停

时移动1px的下图所做的那样

.btnRoll:hover img {
  filter: alpha(opacity=80);
  opacity: 0.8;
  transform: rotate(360deg);
}

Answer 3

我最近遇到了同样的问题，这就是我选择坚持使用Firefox内置的“Inspect Element”功能的原因

唐纳

firefox bug背景大小，悬停和不透明度

3 个答案: