Fatal编程技术网
  • css/
  • Css IE7兼容性问题

Css IE7兼容性问题

css internet-explorer safari

Css IE7兼容性问题,css,internet-explorer,safari,internet-explorer-7,cross-browser,Css,Internet Explorer,Safari,Internet Explorer 7,Cross Browser,我（显然）对网络开发是新手，我刚刚意识到我的网站在某些IE版本中非常糟糕，但我该如何修复它们呢？当多个层和div不能正确显示时，我如何知道在CSS中更改什么以及在哪里更改 例如： 是否有IE CSS修复/兼容性的资源？Safari/Apple和Windows浏览器之间的位置和颜色差异如何？一些提示： Read–那里有大量有用的信息 不要担心事情看起来完全一样，IE 6、7和8已经过时了，而且它们呈现页面的方式中存在着非常真实的bug。你的代码可能是正确的，但在IE中看起来仍然是错误的 不要写

我（显然）对网络开发是新手，我刚刚意识到我的网站在某些IE版本中非常糟糕，但我该如何修复它们呢？当多个层和div不能正确显示时，我如何知道在CSS中更改什么以及在哪里更改

例如：

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

一些提示：

Read–那里有大量有用的信息

不要担心事情看起来完全一样，IE 6、7和8已经过时了，而且它们呈现页面的方式中存在着非常真实的bug。你的代码可能是正确的，但在IE中看起来仍然是错误的

不要写
，而是写：

<!--[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]-->
如果你想把东西提升到20px，但只在IE6中。这有助于您以最少的麻烦瞄准旧浏览器，而不必担心您在其他地方把事情搞砸了

使用像升级旧IE这样的脚本来使用新IE的许多功能，以及修复一些更愚蠢的bug。是另一个有用的工具，用于在这些古老的浏览器中获取边界半径、框阴影和渐变

颜色差异可能是因为您的图像包含一个颜色配置文件，在联机之前使用类似于（OSX）的工具删除此类无关信息，或者从Photoshop将其保存到Web

希望有用

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

玩得开心

条件注释的另一个更标准的用法是在其中放置指向ie特定样式表的链接。（与更改body类不同，这是一种我以前从未见过的非常有趣的方法！）

您可以尝试许多解决方案

首先，您可以为Internet Explorer单独创建一个样式表，这是我在大多数网站上所做的。您可以将其包含在以下代码中：

<!-- [if IE]>
<link type="text/css" rel="stylesheet" href="/path/to/style.css" />
<[endif]-->
其次，谷歌管理着一种叫做“Chrome框架”的东西，它基本上只是IE中的一种Chrome浏览器。它在客户端的要求稍高一些，但它解决了IE在渲染方面的绝大多数问题

您可以在铬框上找到更多信息

编辑：

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

首先，你应该使用某种重置。在编写跨浏览器代码时，CSS重置将使游戏环境更加公平

见：

理想情况下，您希望避免使用特定于浏览器的样式表。如果你的代码写得好，你就不需要它们了

创建网站时，在添加代码时，应在每个浏览器中定期检查。否则，您可能会因为糟糕的代码而导致雪球效应。当您熟悉IE的怪癖时，您将更高效地编写跨浏览器代码

此外，我将避免使用太多的位置属性（即“位置：相对”）。你的布局很基本；不应该有这么多的理由。如果您非常依赖它们，您应该重新考虑如何构建代码。

您将需要的资源：

首先，一些网站提供兼容性图表，向您展示哪些功能可以在各种浏览器中使用：

  • Quirksmode.org-
  • CanIUse.com-
    • 接下来，介绍一些改进兼容性的方法（“Polyfils”）：

  • 现代化
  • CSS3-
  • 迪安·爱德华兹的IE7.js-
  • Modernizer的Polyfill系列-
    • 最后，如果您还没有使用它，我推荐JQuery。它是一个Javascript库，可以处理许多兼容性问题。

    我更喜欢它，因为它可以减少http请求，并使您能够将事情保持在一起。如果你也使用SASS，你可以解决一个问题一次，把它放在一个混合器里，再也不用担心它了！ 
    <!-- [if IE]>
<link type="text/css" rel="stylesheet" href="/path/to/style.css" />
<[endif]-->