选项3：

Question

当悬停/取消悬停按钮时，底部边框在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问题吗？我该如何解决这个问题？

Answer 1

将display:block放在.btn:hover。

猜猜会解决它！

.btn:hover {
    box-shadow: 0 0 0 2px #b1b3b4;
    display:block;
}

Answer 2

选项1：
设置可滚动div的高度似乎可以解决问题：

<强> Working Example 1

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

选项2：
使用overflow-x:scroll;而不是overflow:auto;：

<强> Working Example 2

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

选项3：

可能是最佳选择，因为它允许在IE9中显示框阴影。
用类.btn包裹div中的按钮，而不是直接将类放在按钮上。

Working Example 3

.btn {
    display:inline;
}
.btn:hover {
    display:inline-block;
    border-radius:2px;
    box-shadow: 0 0 0 2px #b1b3b4;
}

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

选项4：
只是为了笑......

<强> Working Example 4

<!--[if IE]>
    <div id="noIE"><a href="http://www.mozilla.org/en-US/">Please download a Real Browser!</a>
        <br><sub>Internet Explorer is hateful non-compliant browser that kicks puppies... </sub>
    </div>
<![endif]-->

Answer 3

要更正此问题，请将overlow: auto更改为overflow: visible，这样就可以了。

Answer 4

先生，你有一个非常奇怪的错误。它肯定是一个错误，如果你在ie10上使用ie9模式，这将不会发生。

我无法弄明白为什么但如果您手动调整窗口大小，它似乎会回到原始状态。也许你可以用javascript假装这个？

我发现的另一件事是，如果你使用滚动在元素上设置:hover {zoom: 1}，它会在悬停时“重置”自身。也许有人可以用它来弄清楚它为什么会这样做。

在这里摆弄它：http://jsfiddle.net/WW3bh/10599/

Answer 5

试试这个：

选项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/

Answer 6

请试试这个css：

.btn:hover {
    box-shadow: 1px 2px 0px 1px #b1b3b4;
}

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

http://jsfiddle.net/WW3bh/10472/

Answer 7

为div添加100％的高度应解决您的问题

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

这是工作的JSFiddle：http://jsfiddle.net/c2sBp/

Answer 8

我在Ie9中检查了这一点，并没有发现边界底部扩大。请试一试。让我知道

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hover demo</title>
  <style>
  .btn{
        box-shadow: 0 0 0 2px #b1b3b4;
      }

      .noBtn{
      box-shadow: none;
      }
  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
  <div style="overflow: auto; border: 1px solid black;" >

      <div style="width: 110%; height: 20px;">

        Wide content causing horizontal scrolling....
      </div>
      <button id="hover">Hover Me</button>
    </div>
<script>
$(document).ready(function(){
try{

    $('#hover').hover(function () {

    $("#hover").addClass('btn');
    $("#hover").removeClass('noBtn');

});

$('#hover').mouseleave(function () {

    $("#hover").removeClass('btn');
    $("#hover").addClass('noBtn');


        });
}catch(e){
alert(e);

}
});

</script>

</body>
</html>

尝试后请告诉我。

在IE9中使用框阴影悬停按钮时，底部边框会跑掉

8 个答案:

选项3：