Question

我正在使用自适应网站。我已经使用媒体查询来做出负责任的事情。基本上，我没有使用任何固定宽度。我用百分比作为每个div的宽度。

因此，根据浏览器的大小调整，可以按比例缩放网站。对于使用宽度的百分比可能会导致较旧的问题。因为ie即9之前不支持媒体查询，所以，我想为那些构建不可扩展的版本。由于我只提供了很少的代码来实现可伸缩性，所以如果我使用我的默认CSS在我的主样式表下/在任何地方编写CSS代码也可以吗？

喜欢style.css：

#info {
   width: 13.672%;
   /*if ie9 and lower
   width: 175px;*/
   height: 830px;
   /*if ie9 and lower
   margin-right: 40px;*/
   margin-right: 3.125%;
   float: left;
}

img {
  margin: 0px;
  padding: 0px;
  border: 0px;
  max-width: 100%;
  /*if ie9 and lower
   max-width: inherit*/
  height: auto;
  /*if ie9 and lower
   height: inherit*/
}

我想写那种格式。但是，我不知道正确的格式。请告诉我正确的格式。

另一个问题。由于那些版本的ie不支持media-query，所以meta标签

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
<link href="KT2012.css" rel="stylesheet" type="text/css" />
<link href="kt_large.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:500px)" href="kt_small.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width:800px)" href="kt_tablet.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:801px) and (max-width:1024px)" href="kt_medium.css" />

tablet.css，mobile.css不会为那些旧版本带来任何问题，即不是吗？我的意思是我只想在我的主样式表（KT2012.css）中编写IE特殊css。我应该在mobile.css，tablet.css等每个样式表上编写每个IE特殊的CSS吗？如果设计的基于css文件不支持较旧的ie，那么，如果我为ie制作不可扩展的版本，我不会使用基于设备/视口的样式表做任何事情，不是吗？

Answer 1

我建议使用HTML5样板文件outlined here by Paul Irish采用的方法。基本上，设置您的文档如下：

<!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]-->

现在，您已准备好类以准确定位某些版本的IE。你的CSS会是这样的：

.element { margin-bottom: 20px; }
.lt-ie9 .element { margin-bottom: 10px; }

然后，您可以避免CSS黑客攻击，并且可以将所有内容保存在单个样式表中。

Answer 2

执行此操作的一种方法是使用Conditional Comments。

IE＆lt; = 9（是唯一的浏览器供应商）支持它们，您可以使用它们专门针对IE的任何版本。例如

<!--[if IE 9]>
Special instructions for IE 9 here, for example load a specific CSS file to override rules only for IE 9
<![endif]-->

IE 10虽然有dropped support。

最近，HTML5 boilerplate引入了一种基于类的方法来避免多个样式表（即HTTP调用）问题以及条件注释倾向于创建的碎片CSS规则。

如何在样式表中使用其他默认样式为IE编写CSS

2 个答案: