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

Question

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

您可以找到JS Bin here。

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。 Conditional comments have been depreciated from IE 10 upwards.

有解决方法吗？

Answer 1

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

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

Answer 2

在JavaScript中使用style.display方法：style.display

var el = document.getElementById("button");
    el.style.display = "none";

您还可以通过获取navigator.userAgent

的值来获取浏览器类型

Answer 3

最好修复样式，以便它们适用于所有浏览器。正如蒂姆梅多拉和其他人指出的那样，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 -->

CSS：

然后将#section1 css更新为：

#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;
}

这将修复您的按钮以在所有浏览器中工作 - 实际上这些更改适用于IE8 +。

这是一个更新的jsbin，显示了更改：http://jsbin.com/todufuma/7/edit