Question

此代码一直在Chrome中运行，直到现在为v32.0.1700.76 m。现在，当我将display属性切换为内联（打算使元素可见）时，它将元素的宽度和高度都设置为-10px。它可以在Firefox中使用，并且一直在Chrome中使用...直到现在。我甚至尝试将宽度和高度硬编码到.on类中，但是在某种程度上它被覆盖了。

<style>
.on {display: inline; width: 35px; height: 35px}
.off {display: none}
</style>

<div style="width:300px" class="featImage">
<img width="300" height="250" src="http://thumbs.fliqz.com/622f3b4c6abd4845a17ca177bc27cc95.jpg">

<div id="fav" style="width: 35px; height: 35px; padding: 10px 10px 0 0; background: red; margin: -257px 0 0 250px; float: right; position: relative; z-index: 10;"></div>
</div>

<script>

$(document).ready(function(){

 $(".featImage").hover(
  function () {
    $('#fav').removeClass('off').addClass('on');
  },
  function () {
    $('#fav').removeClass('on').addClass('off');
  }
 );

});

</script>

Answer 1

http://jsfiddle.net/tXmsE/4/

浮动图像，它将起作用。

<img style="float:left;" width="300" height="250" src="http://thumbs.fliqz.com/622f3b4c6abd4845a17ca177bc27cc95.jpg">

此外，这也可能是个问题：

display:inline resets height and width

此外，您可以删除浮动：

http://jsfiddle.net/tXmsE/6/

（因为你已经定位了带边距和填充的元素......）

然而，根据我的口味 - 这是最干净的解决方案：http://jsfiddle.net/tXmsE/3/（位置：绝对）

Jquery切换改变Chrome中的宽度/高度

1 个答案: