8

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

4

8 回答 8

3

放在. display:block_.btn:hover

猜猜这会解决它！

.btn:hover {
    box-shadow: 0 0 0 2px #b1b3b4;
    display:block;
}
于 2013-05-22T14:08:50.653 回答
2

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

工作示例 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;：

工作示例 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 中可见。
将按钮包装在带有类的 div 中，.btn而不是将类直接放在按钮上。

工作示例 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：
只是为了笑……

工作示例 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]-->
于 2013-09-05T01:08:24.740 回答
1

要更正此问题，请更改：overlow: autoto overflow: visibleand that should so it。

于 2013-05-22T14:11:34.620 回答
1

尝试这个：

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

于 2013-09-10T09:47:08.540 回答
1

先生，你有一个非常奇怪的错误。这绝对是一个错误，如果您在 ie10 上使用 ie9-mode，则不会发生这种情况。

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

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

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

于 2013-09-09T17:16:00.733 回答
0

请试试这个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/

于 2013-09-05T06:07:26.983 回答
0

我在 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>

请尝试后告诉我。

于 2013-09-10T09:40:23.260 回答
0

向 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/

于 2013-09-05T14:31:07.317 回答