Question

不幸的是，我必须开发一个IE7支持的网站。

我们知道IE7不支持box-sizing：border-box;这使我在IE7样式表中单独指定每个元素的宽度。

我想在grid.less中编写一些逻辑，以便相应地计算ie7的宽度。

就像下面的

.grid{
   width:/*width for modern browsers */;
   *width:/*calculate width for ie7 */;
}

请帮助或指出任何资源....谢谢

Answer 1

LESS没有允许您定位特定浏览器的功能。

执行此操作的标准方法是使用单独的样式表：

<link rel="stylesheet" type="text/css" media="screen" href="css/grid.css"  />
<!--[if IE 7]>
  <link rel="stylesheet" type="text/css" media="screen" href="css/ie7-grid.css"  />
< ![endif]-->

但您可以使用类似以下from Paul Irish的方法：

HTML ...

<!--[if lt IE 7]>      <html class="ie6"> <![endif]-->
<!--[if IE 7]>         <html class="ie7"> <![endif]-->
<!--[if IE 8]>         <html class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html>         <!--<![endif]-->

... LESS

.grid{
   width:/*width for modern browsers */;
   .ie7 & {
     width:/*calculate width for ie7 */;
   }
}

...这应该导致css像......

.grid{
  width:/*width for modern browsers */;
}

.ie7 .grid{
  width:/*calculate width for ie7 */;
}

较少的解决方案，网格系统，盒子大小

1 个答案: