Question

我（显然）是网络开发的新手，我现在才意识到我的网站在某些IE版本中已经搞砸了，但我该如何修复它们呢？我如何知道CSS中的更改以及多个图层和div未正确显示的位置？

示例：http://www.jwstudio.us/bkpa

IE CSS修复/兼容性是否有资源？ Safari / Apple和Windows浏览器之间的定位和颜色差异如何？

Answer 1

几点提示：

阅读http://quirksmode.org/ - 在那里加载了大量有用信息。

不要担心看起来完全相同的东西，IE 6,7和8已经过时了，并且它们呈现页面的方式存在非常真实的错误。您的代码可能是正确的，但在IE中看起来仍然是错误的。

不要写<body>，而是写：

<!--[if lt IE 7 ]> <body class="ie6"> <![endif]--> 
<!--[if IE 7 ]>    <body class="ie7"> <![endif]--> 
<!--[if IE 8 ]>    <body class="ie8"> <![endif]--> 
<!--[if IE 9 ]>    <body class="ie9"> <![endif]--> 
<!--[if gt IE 9]>  <body> <![endif]-->
<!--[if !IE]><!--> <body> <!--<![endif]-->

然后，在CSS中你可以编写如下内容：

.someclass {
    loads of normal CSS
}

.ie6 .someclass {
    position:relative;
    top:-20px;
}

如果你想移动20px，但仅限于IE6。这有助于您以最小的麻烦瞄准旧浏览器，而不必担心您在其他地方搞砸了！

使用像ie9.js这样的脚本来升级旧的IE以使用后来的IE中的许多功能，以及修复一些愚蠢的错误。 CSSPie是另一个有用的工具，可以让border-radius，box-shadow和渐变在这些古老的浏览器中运行！

颜色差异可能是因为您的图片包含颜色配置文件，使用imageoptim（OSX）之类的东西在上线之前删除诸如此类的无关信息，或者从Photoshop保存它们用于Web。

希望这很有用！

Answer 2

除了Rich B.提到的quirksmode之外，还有两个可靠的资源

http://haslayout.net/css/

http://www.positioniseverything.net/explorer.html

玩得开心。 ;）

条件评论的另一个标准用法是在内部放置特定样式表的链接。（而不是改变身体类 - 但这是一个我以前从未见过的非常有趣的方法！）

Answer 3

您可以尝试多种解决方案。

首先，您可以为Internet Explorer制作单独的样式表，这是我在大多数网站上所做的。您可以使用以下代码包含它：

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

其次，谷歌管理着名为“Chrome Frame”的东西，它基本上只是IE中的Chrome浏览器。它在客户端要求更高，但它解决了IE在渲染时遇到的绝大多数问题。

您可以在Chrome相框here上找到更多信息。

修改

我还建议放弃对IE6的支持，因为浏览器大约已有10年历史了，而且大多数人现在已经升级了。

Answer 4

您需要的资源：

首先，一些具有兼容性图表的网站会向您展示哪些功能适用于各种浏览器：

Quirksmode.org - http://www.quirksmode.org/css/contents.html
CanIUse.com - http://caniuse.com/

接下来，为了提高兼容性而去寻找一些黑客（“Polyfils”）的地方：

Modernizr - http://modernizr.com/
CSS3Pie - http://www.css3pie.com/
Dean Edwards的IE7.js - http://code.google.com/p/ie7-js/
Modernizr的Polyfills系列 - https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

最后，如果你还没有使用它，我推荐JQuery。它是一个Javascript库，可以解决许多兼容性问题。

Answer 5

首先，您应该使用某种重置。在重新浏览器编码时，CSS重置将使比赛场地更加水平。

请参阅：http://developer.yahoo.com/yui/reset/

理想情况下，您希望避免使用特定于浏览器的样式表。如果编码良好，则不需要它们。

创建网站时，您应该在添加代码时在每个浏览器中定期检查。否则你最终可能会遇到代码不佳的雪球效应。当您熟悉IE怪癖时，您将更有效地编写跨浏览器代码。

我也会避免使用这么多的位置属性（即“position：relative”）。你的布局很基本;没有理由这么多。如果您如此依赖它们，那么您应该重新考虑如何构建代码。

IE7兼容性问题

5 个答案: