internet-explorer - 修复 IE 7 8 9 的样式表

Question

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

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

然后当我使用 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:修复了最大的布局问题，新链接

Answer 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 中不起作用。 :not 和 :last-child 都不受 IE8 或更早版本的支持，并且 :after 在 IE7 中不受支持。您还使用了一些复杂的属性选择器，这在旧的 IE 中也不起作用。

我认为这解决了我能看到的大部分问题。如果你在经历了所有这些之后仍然遇到问题，我建议你再问一次(但下次让你的问题更具体!这样会更容易回答)

希望对您有所帮助。