IE 8（可能更早）CSS灾难[关闭]答案

【问题标题】：IE 8 (and likely earlier) CSS Disaster [closed]IE 8（可能更早）CSS灾难[关闭]
【发布时间】：2013-08-29 20:38:20
【问题描述】：

我犯了使用最新版本的 safari/firefox 和 chrome 设计网站的错误。我简要检查了它在 IE 10 上看起来还不错，但并没有在后备中投入太多。然后我开始使用'sexier' css 技术并忘记了 IE。

我没有防备，这是一个愚蠢的错误。

该网站在早期版本的 I.E. 中看起来很糟糕。它在 I.E8 上进行了简要测试。导航栏跨越页面，不显示entypo 字体，并且微调器全部搞砸了。那是第一页，我还不能查看其他页面。

更糟糕的是，我使用的是 mac，我上面的 windows 虚拟机正在运行 windows 8，如果不先安装旧版本的 Windows，我将无法安装旧版本的 IE。

这几乎是一场灾难。该网站位于 kingpetroleum.co.uk，非常感谢任何帮助。

编辑：字体细节不起作用

@font-face{font-family:'EntypoRegular';
src:url(data:font/woff;charset=utf-8;base64,d09GRg ...... ...... ..... etc);
src:url(data:fnt/truetype)format(''truetype); //deliberately mispelt there to avoid pasting a ton of code
url('entypo-webfont-webfont.svg#EntypoRegular') format('svg');
    font-weight:normal;
    font-style:normal

【问题讨论】：

一些屏幕截图或网站链接有助于了解问题的严重程度
您需要向我们提供更多信息，以便我们为您提供帮助
这可能有助于在各种 IE 中查看网站的非交互式功能：netrenderer.com
fontsquirrel.com 有一个很好的字体转换服务——它甚至可以输出你需要的 CSS，准备在网络上使用。

标签： html css internet-explorer cross-browser

【解决方案1】：

如果您在设计整个网站时没有考虑 IE，则没有简单的解决方法。我建议使用仅限 IE 的样式表。

类似这样的：

<!--[if IE]>
<link href='ie-style.css' rel='stylesheet' type='text/css'>
<![endif]-->

然后重新设置元素的样式，使其对 IE 友好。这适用于所有 IE 浏览器（不包括 ie10），但有些标签只会在特定版本中使用此样式表。

【讨论】：

干杯西蒙，我认为这可能是唯一的方法。有很多页面，但我错了。
"适用于所有 IE 浏览器" -- IE10 停止使用条件 cmets，仅供参考。在这种情况下效果很好，因为 IE10 可以按原样呈现网站:)
@xec - 为这次更新欢呼。我刚刚尝试使用IE10的开发模式在IE8中查看站点以测试下面提到的css3Pie，但它似乎没有被调用。会不会是因为这个？如果 IE10 忽略它们，不确定使用开发模式是否会改变浏览器对 IF IE 的反应
@SteveGreen IE10 在“Internet Explorer 8”浏览器模式下将应用条件 cmets，您可以使用 jsfiddle.net/tsPVD/show 验证 - 文本“I AM IE！”应该出现在 IE8 模式而不是 IE10 模式
@SteveGreen 啊，是的 - 没有 shim 的 IE8 不支持 html5 语义元素 code.google.com/p/html5shiv

【解决方案2】：

您是否考虑过使用像 PIE.js 这样的 JS 脚本？

http://css3pie.com/documentation/pie-js/

【讨论】：

这也是一个很好的选择，可以节省很多时间
我现在正试图让它工作，但遇到了一些困难。我已将它添加到我的头标签中，并在 IE8 的开发模式下使用 IE10，但它似乎没有被调用

【解决方案3】：

解决页面中的问题应该不会那么难。首先，使用 modernizr (http://modernizr.com/)，它具有 HTML5 颤抖功能，可以帮助处理新的语义标签，这也是当今任何网页中必须的。另外，使用 normalize (http://necolas.github.io/normalize.css/)，它对跨浏览器的兼容性有很大帮助。

如果您在大屏幕上使用媒体查询（移动优先方法），则必须使用 Respond.js 或只为 IE 添加条件样式（如之前的答案中所述）。

对于渐变，只需提供 png 作为背景，或在不受支持的浏览器上使用纯色背景（优雅降级）。

同样适用于边界半径。

3d carrousel 不应该依赖于 CSS3，除非它被认为是添加到支持它的浏览器的东西（渐进式增强）。如果它很重要，请使用 jQuery。

字体图标应该可以在 IE8+ 中使用，可能是您的代码有问题，或者缺少字体格式。您应该使用 icomoon.io（您可以将 svg 字体导入其中）。

有了良好的代码并坚持良好的做法（使用优雅降级和/或渐进增强），您应该不会对 IE8 有任何大问题。请记住，您的页面不会（也不应该）在所有浏览器中呈现相同的内容，但不能失去其本质。

【讨论】：

感谢您花时间回答和提供建议。我现在正在研究您提到的现代化和规范化。渐变/边界半径和旋转木马可以保持原样。我将包含一条消息，建议用户更新他们的浏览器以获得最佳体验或类似的东西。字体对我来说比较棘手，我记得前段时间遇到过问题。我已经在问题中粘贴了它的代码，你介意看一下吗？再次感谢
您没有使用 eot 格式。 IE8 只使用 eot，所以你应该使用它。如果您对自己的代码没有信心，最好的方法是使用 icomoon。它会让你做一些工作来重做所有事情，但它在大多数浏览器中都运行良好，并且以正确的方式完成。
忘了说，这里有一篇关于它的好文章：tatiyants.com/…（忽略标签的事情，坚持使用modernizr）。