0

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

当我在具有背景大小属性的 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），女巫的宽度为 951px。

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

4

3 回答 3

1

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

于 2013-08-16T08:28:13.477 回答
0

尝试添加

transform: rotate(360deg);

就像我对悬停时移动 1px 的以下图像所做的那样

.btnRoll:hover img {
  filter: alpha(opacity=80);
  opacity: 0.8;
  transform: rotate(360deg);
}
于 2014-08-15T07:55:03.693 回答
-1

我最近遇到了同样的问题，这就是我选择坚持使用 Firefox 中内置的“检查元素”功能的确切原因

  • 皮匠
于 2013-07-17T17:00:09.530 回答