2

我正在使用响应式网站。我已经使用媒体查询来对此负责。基本上，我没有使用任何固定宽度。我使用百分比作为每个 div 的宽度。

这样网站就可以根据浏览器的大小按比例缩放。对于较旧的ie，使用宽度百分比可能会导致问题。由于 ie 9 之前的 ie 不支持媒体查询，所以，我想为那些 ie 构建不可扩展的版本。因为我只提供了很少的代码来实现可伸缩性，所以如果我在我的主样式表中使用默认 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 不支持媒体查询，所以元标记

<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。我应该在每个样式表（例如 at 等）上编写每个 IE 特殊 cssmobile.css吗tablet.css？如果该设计的基于 css 文件不支持较旧的 ie，那么，如果我为 ie 制作不可扩展的版本，我不会对基于设备/视口的样式表做任何事情，不是吗？

4

2 回答 2

5

我推荐 HTML5 样板所采用的方法，由 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 hack，并且可以将所有内容保存在一个样式表中。

于 2013-04-15T16:10:30.577 回答
0

一种方法是使用Conditional Comments。

IE <= 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 已经放弃了对它们的支持。

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

于 2013-04-15T16:14:14.250 回答