Question

如果有人试图在早于IE 8的浏览器中使用Twitter Bootstrap（2.x）响应式可见性类，您可能会发现它们根本不能很好地工作，这基本上是因为IE 7没有支持继承。

Answer 1

有一个解决方案。通过使用HTML5 Boiler Plate文档级CSS样式以及Modernizr来处理旧浏览器的媒体查询，我们可以为可与IE7一起使用的可见性类创建特定的覆盖。我希望这可以帮助至少一个人！

以下解决方案可行（使用initializr创建的基本html包含bootstrap，modernizr，response和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>

...以及包含少于IE 7及以下版本的修复程序的CSS文件：

<强>自举响应-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;  
  }
}

或者，如果您使用的是LESS，则上述CSS文件可以这样写：

<强>自举响应-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;
    }
  }

}

IE7 Bootstrap响应可见性解决方案

1 个答案: