变换比例不适用于嵌套在按钮中的元素

Question

我将transform:scale应用于嵌套在<img>控件中的<button>元素的：hover事件。

适用于Chrome，但不适用于Firefox或IE。

这是代码（如下）。有没有办法让它在Firefox和IE中运行？

我想保留嵌套<img>文件的悬停事件的效果，但如果需要，我可以将其放在<button>上。我真的很好奇，如果这个代码可以用于FF＆amp; IE或者这些浏览器的已知限制（或Chrome允许的非标准版本）。

.zoomable {
  -webkit-transition: all 500ms;
  -moz-transition: all 500ms;
  -ms-transition: all 500ms;
  -o-transition: all 500ms;
  transition: all 500ms;
  border: 1px transparent solid;
}

.zoomable:hover {
  border: 1px orange solid;
  transform: scale(1.2,1.2);
  -moz-transform: scale(1.2,1.2);
}

  <button>
    <img src="bogus.png" class="zoomable" />  
  </button>

Answer 1

您应该在:hover上设置button并保留所有相似内容。就像你说的那样。如果您使用的元素不包含div或span之类的互动，则可以离开.zoomable:hover，这样就可以了。这是一个按钮问题，因为它带来了它的本机交互，并可能与子元素悬停事件发生冲突。