3

我(显然)对Web的发展,我只是现在意识到我的网站在某些版本的IE漂亮搞砸了,但我怎么解决这些问题?我如何知道在CSS中哪些内容需要更改,以及在多个图层和div无法正确显示的情况下?IE7的兼容性问题

实施例:http://www.jwstudio.us/bkpa

是否有IE CSS修复/相容性的资源?那么Safari/Apple和Windows浏览器之间的定位和颜色差异呢?

回答

3

一些提示:

阅读http://quirksmode.org/ - 负载的有用的信息在那里。


不要担心事情究竟长得一模一样,IE 6,7和8是非常过时的,并且有在他们的页面呈现方式非常真实的bug。你的代码可以是正确的,并且在IE中仍然看起来错误。


而是写作<body>的,写:

<!--[if lt IE 7 ]> <body class="ie6"> <![endif]--> 
<!--[if IE 7 ]> <body class="ie7"> <![endif]--> 
<!--[if IE 8 ]> <body class="ie8"> <![endif]--> 
<!--[if IE 9 ]> <body class="ie9"> <![endif]--> 
<!--[if gt IE 9]> <body> <![endif]--> 
<!--[if !IE]><!--> <body> <!--<![endif]--> 

然后,在你的CSS,你可以写的东西,如:

.someclass { 
    loads of normal CSS 
} 

.ie6 .someclass { 
    position:relative; 
    top:-20px; 
} 

如果你想移动的东西了20像素,但只在IE6中。这可以帮助你针对旧的浏览器以最小的麻烦,并没有在其他地方担心你拧的事情了!


ie9.js使用脚本来升级旧的IE浏览器使用的许多功能,从后来的IE,以及修复了一些愚蠢的错误。 CSSPie是获得边界半径,箱阴影和渐变在这些古老的浏览器工作的另一种有用的工具!


颜色差异可能是因为您的图片包括颜色配置文件,使用类似imageoptim(OSX)剥离掉无关的信息,如本次网上敷上,或保存他们从Photoshop的Web。


希望这很有用!

2

下面是增加了两个可靠的资源,以怪异模式里奇B.提到

http://haslayout.net/css/

http://www.positioniseverything.net/explorer.html

有乐趣。 ;)

另一个更规范使用条件注释是把链接,即特定的内部样式表。 (而不是改变体类,但是这是我以前没有见过一个真正有趣的方法!)

+1

我更喜欢它,因为它减少了http请求,并让您保持一致。如果你也使用SASS,你可以解决一个问题,将其粘贴到一个混音器中,而不用再担心它! – 2011-04-10 22:11:35

1

有许多解决方案,你可以尝试的。

首先,您可以为Internet Explorer制作单独的样式表,这是我在大多数网站上所做的。你会用下面的代码包括它:

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

其次,谷歌负责管理一些所谓的“浏览器内嵌框架”,这基本上是在IE中的Chrome浏览器。这对客户端来说要求更高一些,但它修复了IE在渲染时遇到的绝大多数问题。

您可以在Chrome Frame here中找到更多信息。

编辑:

我也建议开沟支持IE6,看到浏览器是约10岁,大多数人现在升级。

0

首先你应该使用某种类型的重置。编码跨浏览器时,CSS重置会使得游戏场更加平坦。

参见:http://developer.yahoo.com/yui/reset/

理想情况下,你要避免使用浏览器特有的样式表。如果你写得很好,你就不需要它们。

创建网站时,您应该在添加代码时定期在每个浏览器中检查它。否则,最终可能会导致代码不佳的雪球效应。随着您熟悉IE的怪癖,您将更有效地编写跨浏览器代码。

此外,我会避免使用这么多的位置属性(即“位置:相对”)。你的布局很基础,应该没有这么多的理由。如果你非常依赖他们,你应该重新考虑你如何构建你的代码。

1

资源,你需要:

首先,有些网站的兼容性图表向您展示哪些功能将在不同的浏览器工作:

  1. Quirksmode.org - http://www.quirksmode.org/css/contents.html
  2. CanIUse.com - http://caniuse.com/

接下来,去一些hacks(“Polyfils”)去提高兼容性的地方:

  1. Modernizr的 - http://modernizr.com/
  2. CSS3Pie - http://www.css3pie.com/
  3. 院长爱德华兹的IE7.js - http://code.google.com/p/ie7-js/
  4. 的Modernizr的Polyfills的集合 - https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

最后,如果你不使用它已经,我推荐JQuery。这是一个Javascript库,处理很多兼容性问题。