Question

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

所以现在我想解决它。

但问题是我想修复它而不会在firefox或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和LOWER

<!--[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和LOWER

<!--[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和LOWER

<!--[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样式表，但您可以将代码更改为特定版本，甚至是一组版本，例如“少于IE9”

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

Answer 3

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

没有一个解决所有IE问题的神奇子弹，提供完全不同的样式表通常需要做更多的工作。

您可以使用conditional comments专门为IE提供代码，但在绝大多数情况下，应该轻轻一点。

Answer 4

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

reset.css将“删除”每个浏览器的不同预设标准，然后将您的实际样式表加载到干净的平板上。

只有在测试了reset.css和stylesheet-name.css后才能创建特定于浏览器的黑客攻击。这是跨多个浏览器进行一致显示的最佳实践。

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

Answer 5

您要求的是<!--[if IE]>标记。这个website详细介绍了它。

但是，将来您可以构建一个跨平台工作的站点，而无需使用If IE标记。这一切都取决于你的CSS和标记。

为特定浏览器创建布局

5 个答案: