为特定浏览器创建布局

Question

我有一个asp.net-mvc3网站。我用css创建了所有的布局。在firefox和Chrome上，它的布局正是我想要的，但在in浏览器上却是一团糟。

因此，现在我正在尝试修复它。

但问题是，我想修复它，而不是在火狐或chrome上搞乱它。

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

如下所示：

如果Internet Explorer使用此css表或样式，则使用我已有的。

Answer 1

使用这些(把它放在头上)：

面向所有版本的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]-->

Answer 2

你需要条件IE样式表。

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

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

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

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

Answer 3

您必须找出问题(可能与使用怪癖模式有关)并解决它们。

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

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