Javascript 如何在IE10+；中动态隐藏div；？

我有一个带有位置的按钮：绝对，在最新的Chrome和Firefox中，它完全居中地显示在两个部分之间。但是，在Internet Explorer 11中，按钮移动到页面左侧，只显示一半，这会破坏布局

你可以找到一份工作

CSS/LESS:

.button {
   z-index: 150;
   position: absolute;
   margin: 110px 0 0 -125px;
   height: 54px;
   width: 250px;
   letter-spacing: 3px;
   text-transform: uppercase;
}

为了简单地隐藏Internet Explorer中的按钮，我使用了以下条件注释：

<!--[if IE]>
        <style>#slogan .button {display: none;}</style>
<![endif]-->

不幸的是，这只适用于旧版本的IE

---

有解决方法吗？

在JavaScript中使用style.display方法：

---

您还可以通过获取

navigator的值来获取浏览器类型。userAgent

我终于找到了一个简单明了的解决方案，使用jQuery检测Internet Explorer，包括最新版本11：

 <script>
      $(document).ready(function() {
        if (navigator.userAgent.match(/msie|trident/i)) {
          alert('You are using the worst browser on this planet.');
          $('.button').hide();
        }
      });
 </script>

$（文档）.ready（函数（）{
if（navigator.userAgent.match（/msie | trident/i））{
警报（'您使用的浏览器是这个星球上最差的'）；
$（'.button'）.hide（）；
}
});

最好修复样式，使其在所有浏览器中都能工作。正如蒂姆·梅多拉（Tim Medora）和其他人指出的那样，IE10+如今更符合标准

HTML:

<!-- Section 1 -->
<div id="section1" class="container-fluid text-center">

  <div class="container">
  ... moved the form from here ...
  </div>

  <!--
   - Move this form from the ".container" to "#section1".
   - Add the .learn-more-container class to the form.
  -->
  <form class="learn-more-container" action="">
      <button type="submit" class="btn btn-primary hidden-xs learn-more-btn">BUTTON</button>
    </form>
</div><!-- /. Section 1 -->

这将使您的按钮在所有浏览器中都能工作——事实上，这些更改在IE8+上都能工作

---

下面是一个更新的jsbin，显示了这些更改：

解决问题不是比隐藏问题更好吗？IE11相当可靠/符合标准。你能创建一个JSFIDLE来说明问题吗？我和下一个web开发人员一样讨厌IE，但我必须同意Tim的观点。有没有可能你可以分享更多的代码，甚至是一支代码笔/小提琴来看看是否有问题？…我想知道为什么位置：绝对。我看不到任何定位。更多的css和html呢？这就像试图画一个家庭平面图，只是想扔一个钥匙孔；这意味着您的HTML组织得不好。也许你应该分享你的HTML，这样我们就可以提出好的建议。当我在IE11中使用hide（）时，它甚至没有隐藏div。

<!-- Section 1 -->
<div id="section1" class="container-fluid text-center">

  <div class="container">
  ... moved the form from here ...
  </div>

  <!--
   - Move this form from the ".container" to "#section1".
   - Add the .learn-more-container class to the form.
  -->
  <form class="learn-more-container" action="">
      <button type="submit" class="btn btn-primary hidden-xs learn-more-btn">BUTTON</button>
    </form>
</div><!-- /. Section 1 -->

#section1 .learn-more-container {
    z-index: 150;  
    position: absolute;
    bottom: 0;
    width: 100%;
    margin-bottom: -25px;
}

#section1 .learn-more-btn {
    height: 54px;
    width: 250px;
    letter-spacing: 3px;
    text-transform: uppercase;
}