让网站在 IE 中运行答案

【问题标题】：Getting a site to work in IE让网站在 IE 中运行
【发布时间】：2011-11-20 18:52:47
【问题描述】：

我在 Dreamweaver CS5 中构建了一个站点，虽然我的测试站点在 Firefox/Safari 中看起来不错，但在 IE 8 中看起来很糟糕。对于初学者，图片的内联<li>（3 行，每行 4 行）甚至不会出现在主页上。看这里- 测试站首页：http://www.lauradimeo.com/TEST/index2.html

在我当前的主页上，我的徽标/SM 链接图像出现在它们周围带有一个灰色框。啊! 当前站点首页：http://www.lauradimeo.com

任何熟悉 IE 并有修复想法的人？

提前谢谢你。

【问题讨论】：

“在 IE 中看起来很糟糕” - 欢迎来到网页设计 :) 说真的，使用这个工具来验证你的 HTML：validator.w3.org 许多渲染错误是由无效标记引起的，你有很多，而 IE 并不以宽恕这些错误而闻名。
您还有两个打开的<html> 标签：去掉<body> 标签之后的第二个标签。

标签： html css internet-explorer browser backwards-compatibility

【解决方案1】：

对于您的边框问题，IE 有一个可怕的事情，即包含在链接中的图像设置了边框。您应该可以通过在图像上指定“border: 0”来解决这个问题。

至于未显示的图像，您似乎正在使用“部分”标签。理论上，这个 HTML5 标签可以在 IE8 中使用。然而，理论并不总是像微软想的那样奏效。我建议以下两件事之一：

1) 尝试简单的 !DOCTYPE html 而不是 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional .dtd"

或 2) 用 div 替换 section 标签。

其中一个应该可以解决问题。

顺便说一句，我注意到您是一名设计师。我不确定您是否以网页设计工作为目标，但如果您是，我强烈建议您尝试手动完成大部分 HTML 和 CSS。这样做帮助我学习了如何做跨浏览器的 CSS、HTML 和 javascript，比依赖所见即所得的编辑器要快得多。

希望这会有所帮助！

【讨论】：

更改文档类型无济于事，但使用 div 而不是 section 会。或者，OP 应包含 HTML5 shiv
感谢您的回复。边界是解决该问题的简单有效的方法，但更大的问题仍然存在。 Alohci 是对的，更改文档类型没有帮助。我还没有尝试将这些部分更改为 div ......我对此有点绿，不太确定如何处理。我是否只是将代码中的“部分”一词更改为“div”？

【解决方案2】：

您需要注意条件样式表以处理某些情况。 Good article here 虽然你可以谷歌条件样式表来获得任意数量的类似文章

【讨论】：

在此说明中，您可能最终希望将 CSS 移至外部样式表，以便将呈现与规则 about 呈现分开。这也将为您提供更大的可重用性。 W3Schools 有一个很好的简短指南，说明如何做到这一点。

【解决方案3】：

首先，正如其他人所说，通过 W3C 验证器运行您的代码。它会发现很多其他情况下可能很难发现的问题。

我注意到您在代码中使用了 HTML5 标记，例如 <section>。请注意，IE8 或更早版本默认不支持这些。您可以使用 HTML5Shiv 或 Modernizr 破解 IE 以使其工作（顺便说一下，我强烈推荐 Modernizr）。

如果您打算使用 HTML5 标签，您还应该更改您的文档类型——您当前将其指定为 xhtml 过渡，这与您使用 HTML5 标签的决定不一致。将文档类型更改为 HTML5 文档类型（这不会影响浏览器呈现，但会影响 W3C 验证器中的结果）。

希望对您有所帮助。

【讨论】：

谢谢，非常有帮助。另一个用户建议使用 section 标签，所以我使用了它，但不知道它是 HTML5 并且不受 IE 支持。是否值得在
上使用，因此需要额外的工作来破解它们以使其工作？
<section> 标签本身只是另一个元素；它与浏览器中的<div> 完全相同。它和其他 HTML5 标签的用处在于使您的 HTML 代码更“语义化”；即对搜索引擎等可读。最终用户不会注意到其他方式的任何差异。老实说，如果这是您使用的唯一 HTML5 代码，那么您不妨使用<div>。使用 HTML5 标签是一种很好的做法（谷歌“语义标记”可以找到更多关于原因和方法的信息），但是这个单独的标签可能不值得使用 hacks 让它在 IE 中工作的麻烦。