javascript - 如何在IE10+中动态隐藏一个div？

Question

我有一个带有 position: absolute 的按钮，它在最新的 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 来检测 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>