1

我有一个 asp.net-mvc3 网站。我使用 css 创建了所有布局。布局正是我在 Firefox 和 Chrome 上想要的，但在 Internet Explorer 上却是一团糟。

所以现在我正在尝试修复它。

但问题是我想修复它而不会在 Firefox 或 chrome 上弄乱它。

我必须从头开始并重建布局吗？或者有没有办法为特定浏览器指定特定布局。

像这样的东西：

如果 Internet Explorer 然后使用这个 css 表或样式，否则使用我已经拥有的。

4

5 回答 5

6

使用这些（把它放在头上）：

针对所有版本的 IE

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

定位除 IE 之外的所有内容

<!--[if !IE]><!-->
    <link rel="stylesheet" type="text/css" href="not-ie.css" />
 <!--<![endif]-->

仅针对 IE 7

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

仅针对 IE 6

<!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

仅针对 IE 5

<!--[if IE 5]>
    <link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->

仅针对 IE 5.5

<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->

目标 IE 6 和更低版本

<!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

<!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

目标 IE 7 及更低版本

<!--[if lt IE 8]>
    <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

<!--[if lte IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

目标 IE 8 和更低版本

<!--[if lt IE 9]>
    <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

<!--[if lte IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

目标 IE 6 和更高版本

<!--[if gt IE 5.5]>
    <link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->

<!--[if gte IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->

目标 IE 7 和更高版本

<!--[if gt IE 6]>
    <link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->

<!--[if gte IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->

目标 IE 8 和更高版本

<!--[if gt IE 7]>
    <link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->

<!--[if gte IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->
于 2012-04-30T11:53:46.787 回答
1

您需要有条件的 IE 样式表。

创建您只希望 IE 使用的样式表，并将它们放在 IE 特定代码内的文档头中。例如：

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

这将在任何版本的 IE 上调用 all-ie-only.css 样式表，但您可以将代码更改为特定版本，甚至是一组版本，例如“小于 IE9”

这是一个很好的资源，包含所有信息 - http://css-tricks.com/how-to-create-an-ie-only-stylesheet/（Dan已为您复制并粘贴了此答案中的确切内容）

于 2012-04-30T11:51:51.030 回答
1

您必须确定问题（可能与使用 Quirks 模式有关）并解决它们。

没有什么灵丹妙药可以解决所有 IE 问题，提供完全不同的样式表通常比您需要做的工作要多得多。

您可以使用条件注释为 IE 提供专门的代码，但在绝大多数情况下，这应该轻而易举地应用。

于 2012-04-30T11:54:01.590 回答
1

通过使用完整的 reset.css 样式表，我设法在 IE、Safari、Opera 和 Firefox 中获得非常一致的设计。

reset.css 将为每个浏览器“0 输出”不同的预设标准，然后将您的实际样式表加载到一个干净的石板上。

只有在测试完 reset.css 和 stylesheet-name.css 之后，我才会创建特定于浏览器的 hack。这是跨多个浏览器一致显示的最佳实践。

以下链接是一个很好的例子： http: //meyerweb.com/eric/tools/css/reset/

于 2012-07-24T20:02:30.833 回答
0

你要的是一个<!--[if IE]>标签。这个网站详细介绍了它。

但是，将来您可以构建一个跨平台工作的站点，而不需要 If IE 标签。这完全取决于您的 CSS 和标记。

于 2012-04-30T11:53:20.093 回答