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

Question

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

你可以在这里找到一个JS Bin.

CSS /减:

.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.有条件的评论已从IE 10向上折旧.

有工作吗？

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>

Answer 2

最好修复样式，以便它们适用于所有浏览器。正如 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 -->

CSS：

然后将你的#section1css 更新为：

#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