0

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

我没有辩护，这是一个愚蠢的错误。

该站点在 IE 的早期版本中看起来很糟糕 它在 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
4

3 回答 3

6

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

像这样的东西：

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

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

于 2013-08-29T10:33:06.967 回答
4

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

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

于 2013-08-29T10:34:57.750 回答
2

解决页面中的问题应该不难。首先，使用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 有任何大问题。请记住，您的页面不会（也不应该）在所有浏览器中呈现相同的内容，但不能失去其本质。

于 2013-08-29T12:10:53.260 回答