如何使我的页面与 IE 兼容？答案

【问题标题】：How do i make my page compatible with IE?如何使我的页面与 IE 兼容？
【发布时间】：2010-10-21 23:58:51
【问题描述】：

我正在使用 Django 构建一个网站，我的模板使用 CSS 并使用 firefox 在本地对其进行测试，但是当我正要向我的朋友“展示它”时，我针对 IE 运行它，而该死的网站是都坏了！标题都搞砸了似乎没有什么可以保持在一起，空间都搞砸了！不好。

有什么遗漏！像一些标题声明？ DOCTYPE 什么的？

注意：我从互联网上的某个站点获取了正在使用的 css，当我在 IE 上运行该站点时，一切看起来都不错！

帮助

这是有问题的 css，使用此 css 的 h1 部分正在破坏，有什么线索吗？

div#header
{
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  text-align: left;
  width: 780px;
  height: 102px;
  background: url(/site_media/header_background.gif) no-repeat top left;
}


div#header h1
{
  padding: 30px;
  font-family: Verdana, sans-serif;
  font-size: 17px;
  font-weight: bold;
  color: #c8c8c8;
  letter-spacing: -1px;
}

div#header h1 strong
{
  color: #999;
  width: 810px;
}

【问题讨论】：

尝试检查他们使用的 DOCTYPE 的原始网站 html...
doctype 标签是

标签： html css internet-explorer

【解决方案1】：

这一次对您没有帮助，但是下次您“从头开始”开发网站时，请尝试每天至少在 IE 中测试该网站一次。这样你就不会在最后得到这种惊喜了。

如果您想要更准确的答案，请发布 URL，有人会指出为什么它在 IE 和 Firefox 中看起来不同

【讨论】：

【解决方案2】：

你没有错过任何东西。欢迎来到 IE...

大部分问题很可能是由 IE 的渲染引擎中的错误引起的。这些链接可能会有所帮助：

您可以在 HTML 中使用 conditional comments 为 IE 包含样式表的替代版本。

史蒂夫

【讨论】：

【解决方案3】：

这是我用来确定适当样式表的 PHP 函数：

    function stylesheet() {
    $ua    = $_SERVER["HTTP_USER_AGENT"];
    $iepos = strpos($ua,"MSIE");
    if ($iepos) {
        $vers = substr($ua,$iepos+5,1);
        if ($vers >= 8) return "style.css";
        else return "iestyle.css";
        }
    else return "style.css";
    }

我遇到了一个非常奇怪的问题，我需要 IE8 作为“好”版本，所以大多数人可能会改变......

if ($vers >= 8)

到...

if ($vers >= 7)

然后我只需要一个普通的 CSS 链接：

<?php echo "<link rel=\"stylesheet\" href=\"".stylesheet()."\" />"; ?>

祝你好运。

【讨论】：

我不太确定浏览嗅探是否适合这里，尤其不是您建议的方式。请参阅此处：howtocreate.co.uk/tutorials/jsexamples/sniffer.html 和 quirksmode.org/blog/archives/2006/08/the_dangers_of.html 进行一些讨论。当理论上可以支持 3 个版本的 IE 以及所有其他版本时，这尤其难以维护。如果您只想为 IE 提供服务，请使用条件 cmets。

【解决方案4】：

首先，确保您使用的文档类型声明不会触发Quirks Mode。我建议HTML 4.01 Strict, or XHTML 1.0 Strict。

其次，确保您的网站根据W3C validator 进行验证。

最后，发布有问题的网站，或者发布问题所在的 sn-p，以便我们为您提供进一步的建议。您可能需要 conditional CSS 专门用于 IE 的（版本）。

编辑：现在看到您的更新，您能否发布您认为“损坏”的屏幕截图，您能否使用该过渡文档类型确保页面不并且它验证。随附的 HTML 也会有所帮助。

【讨论】：

XHTML 1.0 Strict 仅在页面使用 mimetype text/xml 而不是 text/html 时才不会调用 quirks 模式

【解决方案5】：

尝试使用 reset.css 文件以获得更“快乐”的交叉浏览。您可以从Eric Meyer's site 看到有关 reset.css 的详细信息。还有另一个由 yahoo 的开发人员开发的 reset.css 文件。但是两个reset.css的结果是一样的。您可以尝试其中任何一种。

【讨论】：

请不要。我们依赖默认样式，并且重置 css 通常比节省更多的工作量。而且它不会帮助 ie 更符合标准 - 所以它不会帮助他的问题。
对我来说效果很好。它为我节省了很多时间，但当然这是一个选择。无论您选择什么，重要的是在编码时感到舒适。感谢您的评论。

【解决方案6】：

然后，一旦您的网站在 IE7 上运行良好，您可能需要面对 IE6 仍然存在的所有其他问题。 IE6 仍然在大约 15% 的 PC 上运行，因此您必须决定如何处理...

哦，别忘了您的 Safari、Chrome 和 FF2 测试。 :)

【讨论】：

【解决方案7】：

对于 doctype，主要目的是让浏览器退出 quirksmode。

你可以使用他们的

<!DOCTYPE XHTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

甚至只是

<!doctype>

这是 HTML5 文档类型，并且更简单 :) [虽然如果您使用 w3c 验证器检查您的代码，它会给出不同的错误。]

最让你困惑的是填充：

div#header h1 { 内边距：30px； ...

IE 有一个，呃，与其他浏览器不同的盒子模型，首先展示它的是边框和填充。（在 IE 中宽度包括填充，在其他浏览器中不包括）

要解决这个问题，您可以使用 IE 条件或hacks 为 IE 赋予其自己的样式，或者您可以使用嵌套的 div 和边距，这样可以更一致地处理。您还可以使用Dean Edwards IE7 或类似的方法使用 Javascript 修复它。

【讨论】：