Question

我目前正在处理我正在开发的网站的问题。（网上商店）当您将鼠标悬停在产品上时，会对产品进行缩放功能。但是在Chrome中这似乎不起作用（图像会消失）。在Firefox中，甚至在Internet Explorer中它似乎工作正常。

这是一个发生了什么的样本。在Chrome中，当您将鼠标悬停在图像上时，图像将消失。在任何其他（非网络工具包，我认为）浏览器，它没有问题。

<div class="col product-block">
  <div class="image">
    <a class="img" a="#">
      <img src="http://www.ecdevelopment.org/wp-content/uploads/2015/04/hippie-flower.jpg" alt="Example" />
    </a>
  </div>
</div>

的CSS：

.product-block:hover {
    box-shadow: 0 0 4px #D4D4D4;
}
.product-block:hover .image .img img {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-btransform: scale(1.2);
    transform: scale(1.2);
}
.product-block .image {
    display: block;
    margin-bottom: 0px;
    position: relative;
    text-align: center;
    border-left: 1px solid #d4d4d4;
    border-right: 1px solid #d4d4d4;
    overflow: hidden;
}
.product-block .image .img {
    transform: rotateX(0deg) rotateY(0deg);
    -webkit-transform: rotateX(0deg) rotateY(0deg);
    -moz-transform: rotateX(0deg) rotateY(0deg);
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}
.product-block .image .img img {
    -webkit-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}

Answer 1

更新您的CSS以添加：

a.img {
    display: inline-block;
    vertical-align: top;
}

我实际上直接为父母（div.image）使用内联块，而不是使用浮点数。

更新了JSFiddle：https://jsfiddle.net/Paf_Sebastien/pnvkeugs/1/

Chrome图片转换（图片消失）

1 个答案: