0

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

4

1 回答 1

2

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

以下解决方案将起作用（使用带有 bootstrap、modernizr、respond 和 ie 类的initializr创建的基本 html）：

测试.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;
    }
  }

}
于 2013-09-17T16:15:09.090 回答