How to dynamically hide a div in IE10+?

Question

I have a button with position: absolute that is displayed perfectly centered between two sections in latest Chrome and Firefox. However, in Internet Explorer 11 the button is moved to the left of the page and only displays half, which destroys the layout.

You can find a 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;
}

In order to simply hide the button in Internet Explorer, I used the following conditional comment:

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

Unfortunately, this only works in older versions of IE. Conditional comments have been depreciated from IE 10 upwards.

Is there a work around?

Answer 1

I finally found a straightforward, simple solution using jQuery to detect Internet Explorer including latest version 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

Use the style.display method in JavaScript: style.display

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

You can also get the browser type by getting the value of navigator.userAgent

Answer 3

It's really best to fix the styles so they work in all browsers. As Tim Medora and others have pointed out IE10+ are much more standards compliant these days.

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:

Then update your #section1 css to this:

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

That will fix your button to work in all browsers - in fact these changes work on IE8+.

Here's an updated jsbin showing the changes: http://jsbin.com/todufuma/7/edit