Fatal编程技术网
  • html/
  • Html 在IE9中使用框阴影悬停按钮时，底部边框会消失

Html 在IE9中使用框阴影悬停按钮时，底部边框会消失

html css

Html 在IE9中使用框阴影悬停按钮时，底部边框会消失,html,css,internet-explorer-9,Html,Css,Internet Explorer 9,在IE9中，悬停/取消悬停按钮时，底部边框会不断向下移动： <!DOCTYPE html> <html> <head> <style> .btn:hover { box-shadow: 0 0 0 2px #b1b3b4; } </style> <head> <body> <div style="overflow: auto; border:

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


.btn:悬停{
盒影：02px#b1b3b4；
}
宽内容导致水平滚动。。。。
盘旋我
小提琴：

这是一个已知的IE9问题吗？如何解决这个问题？

将
显示：block
放在
位置。btn:hover

我猜这会解决它的

.btn:hover {
    box-shadow: 0 0 0 2px #b1b3b4;
    display:block;
}
若要更正此问题，请将：
overlow:auto
更改为
overflow:visible
，这样就可以了。

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

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

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

<!--[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]-->
备选案文3： 可能是最好的选择，因为它允许框阴影在IE9中可见。
用class
.btn
将按钮包装在div中，而不是将类直接放在按钮上

.btn{
显示：内联；
}
.btn:悬停{
显示：内联块；
边界半径：2px；
盒影：02px#b1b3b4；
}
宽内容导致水平滚动。。。
盘旋我
盘旋我
盘旋我
选项4:
只是为了笑

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

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

<!--[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]-->
请尝试以下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>

.btn:悬停{
盒影：1px 2px 0px 1px#b1b3b4；
}
宽内容导致水平滚动。。。。
盘旋我

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

先生，您在那里发现了一个非常奇怪的bug。这肯定是一个bug，如果你在ie10上使用ie9模式，这不会发生

我不明白为什么，但如果手动调整窗口大小，它似乎会回到原始状态。也许你可以用javascript来伪造这个

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

在这里摆弄它：

我在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{
盒影：02px#b1b3b4；
}
noBtn先生{
盒影：无；
}
宽内容导致水平滚动。。。。
盘旋我
$（文档）.ready（函数（）{
试一试{
$（'#hover'）。hover（函数（）{
$（“#悬停”）.addClass（'btn'）；
$（“#hover”）.removeClass（'noBtn'）；
});
$（'#hover'）.mouseleave（函数（）{
$（“#hover”）.removeClass（'btn'）；
$（“#hover”）.addClass（'noBtn'）；
});
}捕获（e）{
警报（e）；
}
});
请在尝试后告诉我。

尝试以下内容：

选项1（稍微更改html）：

您应该尝试在“”标记中添加此内容：'@Xarcell它没有帮助。如果没有这个元，页面也会以IE9模式呈现。为什么不在.btn类上加一个下边距呢？你想要jquery或javascript代码还是css？@Anobik jquery/javascript解决方案也可以。谢谢你的想法，确实如此。但是我仍然需要按钮是一个内联元素（事实上，目前它是内联块），这样我就可以在一行中放置几个按钮而不需要额外的标记。嗯，我仍然需要在容器中有滚动条。我真的无法从所有包含按钮的元素中删除“溢出：自动”，这会造成很大的混乱。谢谢你的想法。选项1不起作用，因为在我的案例中，容器具有动态内容，需要根据其内容进行扩展，选项2-有趣，但在大多数情况下没有溢出，不需要滚动条，选项3相当于Ryan的答案，显示：block，选项4-是最好的！）@Andrey您是否已删除选项3中.btn的边距？我想，这就是你想要的。@EugeneJoseph谢谢，这页边距是我忘了删除的以前方法的遗物。。。编辑以更正。有人能解释为什么我的答案被否决吗？了解我错在哪里会有帮助。干杯。：）不是我，但可能有人决定否决投票，因为答案看起来是重复的（设置高度值可以解决问题，如apaul答案选项1所述）。由于这不是一个精确的副本（高度在apaul的答案中设置为%vs px），所以请对此进行投票。谢谢。这是有道理的您可以使用类“btn”和$“.btn”来代替“#hover”谢谢，在这里给了我很大的帮助，因为这两个选项对我来说是最实用的解决方案（它们不会破坏我现有的样式）。我稍后会接受一个答案（我认为接受Apple的选择3或Anobic的答案，因为他们看起来有类似的想法作为选项1和选项2在这里相对）：（我没有得到赏金：）（：