Question

我有一个响应式图像，在悬停时转换。当图像宽度为100％时，悬停过渡工作正常。但是，在FF21中，当您将浏览器窗口缩小到图像开始缩小的大小，然后将鼠标悬停在图像上时，在某些尺寸下，（背景图像的）向上移动会很小但可感知。这是一个非常小的转变，并不是在每个宽度（奇怪地）发生。

以下两种状态的屏幕截图（没有亮区，悬停时有暗区）。在'x'处最明显地看到了这个错误。效果仅发生在某些宽度（不是全部）并且非常小。但是，它显然仍然存在。

Example of the bug

我也尝试过IE和Chrome，但他们没有显示这种行为。所以它似乎是FF具体的。看起来它正在调整图像大小不到1px。有谁知道为什么会这样，以及如何解决它？（下面的jfiddle链接，你可以自己看看）

http://jsfiddle.net/t3Djd/1/

HTML

<body>
  <figure>
      <h2><a href="#">Title</a></h2>
      <a href="#"><img src="http://placehold.it/500x450" /></a>
  </figure>
</body>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

html, body {
    width: 100%;
    font-size: 100%;
}

/*========================================
============== CENTER IMAGES =============
========================================*/

body {
    text-align: center;
}

/*========================================
=========== RESPONSIVE IMAGES ============
========================================*/

figure, figure > a, img {
    max-width: 100%;
}

/*========================================
============ GENERAL STYLING =============
========================================*/

figure h2 {
    text-align: center;
    font-style: italic;
    font-size: 1.75rem; /* 16 x 1.75 = 28px */
    font-weight: normal;
}

figure h2 a {
    text-decoration: none;
    color: black;
}

/*========================================
============ HOVER TRANSITION ============
========================================*/

figure {
    padding: 1rem 1rem 2rem;
    position: relative;
    display: inline-block;
}

figure h2 {
    margin: -1rem 0 0 -1rem; /* offset the figure padding */
    z-index: 2;
    position: absolute;
    line-height: 0;
    width: 100%;
    top: 50%;
}

figure h2 a {
    z-index: 1;
    color: rgba(255,255,255,0);
    -webkit-transition: color 0.3s ease-in-out;
    -moz-transition: color 0.3s ease-in-out;
    -o-transition: color 0.3s ease-in-out;
    transition: color 0.3s ease-in-out;
}

figure:hover h2 a {
    color: rgba(255,255,255,1);
}

figure > a {
    display: inline-block;
    line-height: 0;
    background: black;
    box-shadow: 0 2px 5px black;
}

img {
    opacity: 1;
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}

figure:hover img {
    opacity: 0.5;
}

Answer 1

这是一个使用firefox的已知错误，问题已经提出here

以下是Firefox Bug Report

的链接

表面修复：将box-shadow: #000 0em 0em 0em;应用于css img代码

为什么当图像小于100％宽时（在FF21中），此图像会在悬停时调整大小？

1 个答案: