修复 IE 7 8 9 的样式表答案

【问题标题】：Fixing a style sheet for IE 7 8 9修复 IE 7 8 9 的样式表
【发布时间】：2011-10-02 22:18:26
【问题描述】：

我不确定问这种问题是否可以接受，但因为我不知道如何解决它：

我从头开始创建了一个 HTML5 CSS3 布局，它在 Firefox 5、Safari 5.1 和 Chrome 12 for Mac 中看起来完全符合我的要求。
但是当我对相同的浏览器使用https://browserlab.adobe.com/ 时，它看起来有点破损（中间的页脚，背景重复，子菜单可见）。这让我怀疑我是否可以信任 Adobe 的工具。

然后当我使用 browserlab 或 http://ipinfo.info/netrenderer/ 在 IE 中查看它时，它完全坏了（意料之中）。
• 在 IE9 中，径向背景丢失，菜单没有设置样式或旋转并被扔到最右边，主要内容显示在侧边栏下方，并且它的宽度没有得到尊重（奇怪，因为在我的旧版布局中，它在 IE9 中显示得很好)
• 在 IE8 中，有时它与侧边栏列表占据所有空间是一样的，有时它只是一个黑页。
• IE7 中如果不是黑白页面，则比 IE8 更糟糕，主要内容不可读。

我使用了两个 JS，一个修复了许多 IE 问题，另一个带来了 HTML5 标签支持，但它们似乎冲突或至少负责黑页。

我确实希望它实际上在 mozilla 和 webkit 中显示良好。我很担心 IE，因为我不知道如何修复它，而且 13% 的访问者使用它（不可忽略）。

我将非常感谢任何帮助，因为这会阻止我启动该网站（这已经过期）。

http://protostype.free.fr/index-sitepointversion4.php

EDIT1：经过验证的 HTML，CSS 给出错误，不确定可以做些什么
EDIT2：修复了最大的布局问题，新链接

【问题讨论】：

您的网页上的错误太多，无法成为一个可行的问题。投票结束，对不起。 IE7/8 中最大的问题是您的 html5shiv（“HTML5 标签支持”）脚本不工作，无论出于何种原因。如果你做到了，事情会好很多。
尝试查看其他一些 polyfills/shims：github.com/Modernizr/Modernizr/wiki/…
@thirtydot 还有什么问题？实际上，如果它几乎是有效的，那它就不会错。你怎么知道 html5shiv 不起作用？
@vonkly 还有哪些？这些标签只有一个，我正在使用它。
页面有效并不意味着它可以在 Internet Explorer 中运行，尤其是在旧版本中，它有很多错误。今天再次在 IE8 中查看您的页面，它只是显示为纯白色，页面上没有任何内容。昨天，页面出现了，但由于 html5shiv 无法正常工作，它完全崩溃了。我可以通过按 F12 调出开发者工具并查看生成的 HTML 来判断它不起作用。

标签： internet-explorer html css

【解决方案1】：

首先，正如其他人所说，html5shiv 似乎不适合您。我在使用 html5shiv 时遇到了同样的问题，我永远无法弄清楚原因，但我发现用 Modernizr 替换它对我来说是成功的（Modernizr 包括相同的功能以及许多其他好东西；有关更多信息，请参见他们的网站） .

这可能会解决很多问题。

诸如径向背景和标签上的border-radius 之类的东西可能可以使用CSS3Pie 修复。

您在样式表中使用了transparent。我很确定这不被支持，至少在 IE7 中（不确定 IE8？）。 IE 有许多解决方法来支持这样的东西，但没有一个特别好。

您的旋转菜单的位置是错误的，因为 IE 与其他浏览器相比旋转元素的方式不同。 IE 的过滤器样式使用不同的原点进行旋转：它围绕左上角旋转，而符合 CSS3 的浏览器默认围绕中心点旋转。

解决这个问题的最简单方法是使用 CSS3 transform-origin 样式让 CSS3 浏览器的行为与 IE 相同（我更喜欢更改 IE 的起点，但在 IE 中更改它会更痛苦)。

您正在使用这样的 CSS 选择器：

.ul_nav_main li a:not(:last-child):after

这在 IE8 中不起作用。 IE8 或更早版本不支持:not 和:last-child，并且IE7 不支持:after。您还使用了一些复杂的属性选择器，它们也不适用于旧版 IE。

我认为这可以解决我能看到的大部分问题。如果你在经历了这么多之后仍然有问题，我建议你再问一次（但下次让你的问题更具体！这样会更容易回答）

希望对您有所帮助。

【讨论】：

谢谢。在您回答之前，我认为我能够解决大多数问题（借助外部帮助），请参阅新链接。 HTMLshiv 现在应该可以工作了。我放弃了modernizr，因为据我了解它并不能解决任何问题，只会让您知道缺少什么。我更关心布局问题而不是装饰问题。我不知道 IE9 是否支持边框半径，我在 browserlab 中看不到圆角。我现在将 PIE 用于 IE8-。如果伪类的东西不起作用，那是微不足道的，但我使用了一个 IE 修复程序，它似乎可以完成这项工作。我有点担心的是换行和换行，我使用
```
 和 pre-line
```
不用担心。希望我至少能提供帮助？ :) re Modernizr：你说得对，它主要是为了了解缺少的内容，以便你可以调整网站以适应，但它也包括整个 HTML5Shiv，我发现它对我来说比 HTML5Shiv 做得更好它自己的（不知道为什么）。重新边框半径：IE9 确实支持border-radius。您可能会发现 CanIUse.com 对此类问题很有用。