【问题标题】：Bottom border runs away when hovering button with box-shadow in IE9在 IE9 中悬停带有框阴影的按钮时，底部边框会消失
【发布时间】：2013-05-22 14:00:36
【问题描述】：

在 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 问题吗？我该如何解决这个问题？

【问题讨论】：

你应该尝试在你的''标签中添加这个：''
@Xarcell 它没有帮助。如果没有这个元，页面也会以 IE9 模式呈现。
为什么不在 .btn 类上放一个底部边距？
你想要一个 jquery 或 javascript 代码还是只有 css ？
@Anobik jquery/javascript 解决方案也可以

标签： html css internet-explorer-9

【解决方案1】：

将display:block 放入.btn:hover。

猜猜这会解决它！

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

【讨论】：

感谢您的想法，确实如此。但是我仍然需要按钮是一个内联元素（实际上目前它是内联块），所以我可以在一行中放置几个按钮而无需额外的标记。

【解决方案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]-->

【讨论】：

感谢您的想法。选项 1 不起作用，因为在我的情况下，容器具有动态内容，需要根据其内容进行扩展，选项 2 - 有趣，但在大多数情况下没有溢出并且不需要滚动，选项 3 相当于 Ryan 的回答显示：块，选项 4 - 是最好的一个！ :)
@Andrey 您是否从选项 3 中的 .btn 中删除了边距？我想，这就是你想要的。
@EugineJoseph 谢谢，边距是以前方法的遗物，我忘了删除...已编辑以更正。

【解决方案3】：

试试这个：

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

【讨论】：

谢谢，在这里提供赏金，因为这两个选项对我来说是最实用的解决方案（它们不会破坏我现有的样式）。我稍后会接受一个答案（我考虑接受 apaul 的选项 3 或 Anobic 的答案，因为他们看起来与这里的选项 1 和选项 2 相对具有相似的想法）。
:'( 我没有得到赏金 :'( :P 开玩笑 :D

【解决方案4】：

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

【讨论】：

hm，我仍然需要在容器中有滚动条。我不能真正从包含按钮的所有元素中删除“溢出：自动”，这会造成很大的混乱。

【解决方案5】：

先生，您给自己带来了一个非常奇怪的错误。而且这绝对是个bug，如果你在ie10上使用ie9-mode，就不会出现这种情况。

我不知道为什么，但如果您手动调整窗口大小，它似乎又回到了原来的状态。也许你可以用 javascript 伪造这个？

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

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

【讨论】：

【解决方案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/

【讨论】：

【解决方案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/

【讨论】：

有人能解释为什么我的回答被否决了吗？了解我错在哪里会很有帮助。干杯。 :)
不是我，但也许有人决定投反对票，因为答案看起来是重复的（设置高度值解决了 apaul 答案选项 1 中描述的问题）。对此表示赞同，因为它不是完全重复的（高度在 apaul 的回答中设置为 % vs px）。
谢谢。这就说得通了。 :)

【解决方案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>

尝试后请告诉我。

【讨论】：

您可以使用类“btn”和$“.btn”代替“#hover”