html – 当在IE9中使用框阴影悬停按钮时,底部边框会跑掉

前端之家收集整理的这篇文章主要介绍了html – 当在IE9中使用框阴影悬停按钮时,底部边框会跑掉前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
当悬停/取消悬停按钮时,底部边框在IE9中再次向下和向下移动:
<!DOCTYPE html>
<html>
<head>
    <style>
      .btn:hover {
        Box-shadow: 0 0 0 2px #b1b3b4;
      }
    </style>
<head>
<body>
    <div style="overflow: auto; border: 1px solid black;">

      <div style="width: 110%; height: 20px;">
        Wide content causing horizontal scrolling....
      </div>

      <button class="btn">Hover Me</button>
    </div>
</body>
</html>

小提琴:http://jsfiddle.net/WW3bh/6353/

这是一个已知的IE9问题吗?我该如何解决这个问题?

解决方法

试试这个:

选项1(稍微改变html):

<div style="overflow: auto; border: 1px solid black;">
    <div style="width: 110%; height: 20px;">Wide content causing horizontal scrolling...</div>
    <span><button class="btn">Hover Me</button></span>
</div>

http://jsfiddle.net/WW3bh/10615/

选项2(使用提供的html,使用js):

$('.btn').hover(function () {
    var $btn = $(this);
    var originalPosition = $btn.css('position');
    $btn.css('position','fixed');
    // this.offsetHeight is needed to trigger browser reflow.
    this.offsetHeight;
    $btn.css('position',originalPosition);
});

http://jsfiddle.net/WW3bh/10617/

猜你在找的HTML相关文章