IE7 Bootstrap Responsive Visibility Solution

Question

There is a solution to this. By using the HTML5 Boiler Plate document level CSS styles, along with Modernizr to handle media queries for older browsers, we can create specific overrides to the visibility classes that will work with IE7. I hope this can help at least one other person!

The following solution would work (base html created using initializr with bootstrap, modernizr, respond, and ie classes):

test.html

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/bootstrap-responsive.min.css">
        <link rel="stylesheet" href="css/bootstrap-responsive-ie7.css">

        <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
    </head>
    <body>
        <h3>Responsive utilities test case</h3>
        <p>Resize your browser or load on different devices to test the above classes.</p>
        <h4>Visible on...</h4>
        <p>Green checkmarks indicate that class is visible in your current viewport.</p>
        <ul class="responsive-utilities-test">
            <li><span class="visible-phone">&#10004; </span>Phone</li>
            <li><span class="visible-tablet">&#10004; </span>Tablet</li>
            <li><span class="visible-desktop">&#10004; </span>Desktop</li>
        </ul>
        <h4>Hidden on...</h4>
        <p>Here, green checkmarks indicate that class is hidden in your current viewport.</p>
        <ul class="responsive-utilities-test hidden-on">
            <li><span class="hidden-phone">&#10004; </span>Phone</li>
            <li><span class="hidden-tablet">&#10004; </span>Tablet</li>
            <li><span class="hidden-desktop">&#10004; </span>Desktop</li>
        </ul>
    </body>
</html>

...and the CSS file containing the fixes for less than IE 7 and below:

bootstrap-responsive-ie7.css

/**
* Responsive Twitter Bootstrap fixes for < IE 8 
* Greg Guydo (www.guydoconsulting.com)
* free to use and adapt for all
**/
// Desktops
@media (min-width: 980px) {
  .lt-ie8 .visible-desktop { 
    *display: inline !important; 
    zoom: 1;
  }
}

// Tablets & small desktops only
@media (min-width: 768px) and (max-width: 979px) {
  .lt-ie8 .visible-tablet,
  .lt-ie8 .hidden-desktop { 
    *display: inline !important; 
    zoom: 1;
  }  
}

// Phones only
@media (max-width: 767px) {
  .lt-ie8 .visible-phone,
  .lt-ie8 .hidden-desktop { 
    *display: inline !important; 
    zoom: 1;  
  }
}

Alternately, if you are using LESS, the above CSS file can be written as such:

bootstrap-responsive-ie7.less

/**
* Responsive Twitter Bootstrap fixes for < IE 8 
* Greg Guydo (www.guydoconsulting.com)
* free to use and adapt for all
**/

.lt-ie8 {

  // Desktops
  @media (min-width: 980px) {
    .visible-desktop { 
      *display: inline !important; 
      zoom: 1;
    }
  }

  // Tablets & small desktops only
  @media (min-width: 768px) and (max-width: 979px) { 
    .visible-tablet, .hidden-desktop { 
      *display: inline !important; 
      zoom: 1;
    }
  } 

  // Phones only
  @media (max-width: 767px) {
    .visible-phone, .hidden-desktop { 
      *display: inline !important; 
      zoom: 1;
    }
  }

}