为 IE 7准备 CSS

分享于 

6分钟阅读

Web开发

  繁體 雙語

介绍

今年晚些时候,微软将正式发布 IE 7. 如果你不能等到那时候,你可以下载一个测试版,然后看看它是如何工作的。 微软已经暗示,当for正式发布时,他们会想要快速升级用户,因这里你的网站是 prepared。

你还可以在 IE 7上使用服务( 如 Browsercam ) 获取你的网站上的一个收费的屏幕截图。 尽管这将提供 static 屏幕截图,但它将节省你的on,并且意味着你可以在计算机上使用 sdl。

在 IE 7中查看你的网站时,你可能会注意到一些事情看起来不同或者布局完全破坏。 这几乎肯定是由于,中的前一个更改所造成的。

IE 7将理解子选择器

历史上,从 IE 隐藏CSS规则的最简单方法是使用子选择器。 目前,IE 不理解子选择器,因此将完全忽略使用它的任何CSS规则。 IE 7将会理解子选择器。

子选择器命令涉及两个元素,其中一个是另一个元素的子元素。 所以,html>body 指的是子级,body,包含在父级,html

如果要将不同的width 值发送到 IE,而不是它的他浏览器,可以使用以下内容:

#foo {width: 400px;}html>body #foo {width: 300px;} 

过去,第一个CSS规则只适用于 IE,而对于其他浏览器则是第二种。 现在,对于 IE6 和以前的版本,第一个CSS规则,而对于IE7和非ie浏览器来说,秒。

IE 7将不理解星号 HTML hack

星HTML与子选择器相反,因为使用这个的任何CSS命令都是仅由 IE 看到 因此,仅向 IE ( 在Mac上包括 IE ) 发送命令,你可以使用:

*html #foo {width: 400px;} 

* 实际上意味着一个通配符( 例如。 它指的是任何元素和元素。 上面 规则将应用于任何分配在标记( 它当然会是) 中的元素,它本身是嵌套的inside,任何其他HTML元素都是嵌套的。

嗯当然 <html> 标签不能嵌套 inside 另一个标签? ! 当然不是。 但是 IE 6和在不同意之前,实际上会遵守 上面 命令。 然而 IE 7将忽略上述命令以及所有其他非浏览器。

XML prolog不会强制使用古怪模式

现在有两种在HTML文件中声明ISO值的方法。 其中之一是将XML放到每个HTML文件的最上面一行,直接在 doctype 声明之前。 这样声明它意味着每个HTML文件的前三行可能如下所示:

<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE htmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

第一行是 XML ;第二行和第三行是 doctype 声明。

如果在 1行没有doctype声明,IE 6将恢复为古怪模式 ( 尽管 上面的HTML代码是完全有效的)。 然而 IE 7不会恢复到古怪模式,而是在标准模式下呈现网页。 ( 如果你以前没有听说过这些术语,你可能希望阅读更多关于怪癖和严格模式的信息。)

如果你的站点使用了 XML prolog,那么你可能会发现它在IE6和IE7上的外观是一种对比。 two模式的主要差异之一是,box模型在古怪模式 ( 在古怪模式中,填充和边框放置在内容区域内,从而减少了文本可用的空间量。) 中 calculated calculated。

过滤/入侵 IE 7

其他版本的相比,你的网站可能在 IE 7上看起来非常不同,而且也不是ie浏览器。 在这里之上,传统上用于隐藏或者显示 IE ( 子选择器和星型 HTML hack )的两个黑客将不再工作。 怎么做? !

微软建议,从/到 IE 7过滤CSS命令,你需要使用的条件注释。 你需要为任何 IE 7-only 命令创建一个CSS文件,然后使用条件注释将这里CSS文件发送到这里浏览器。 为这里,在命令调用主 CSS file: 之后,将下面的代码放到每个HTML文件的header 中。

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

在这个额外的CSS文件中你需要放置的命令是那些将覆盖主CSS文件中的命令的命令。 在文件中,你不需要在两个CSS文件中重复命令,因为IE7也会通过主CSS文件来读。 注意,条件注释只能放在 inside HTML文件中,而不能放在CSS文件中。

IE 7上的CSS改进

好消息是微软已经为 IE 7了许多 CSS fixes,因此在 IE 中的很多奇怪行为应该停止。

IE 还将增加对更多CSS命令和规则的支持,最值得注意的是,:hover 将在所有元素的。 这意味着你可以在 IE 7中创建CSS下拉导航菜单,而不需要任何 JavaScript。 non浏览器已经支持 :hover 在所有元素上的使用很长时间了。

结束语

IE 7即将正式发布,几乎肯定会快速升级到这个版本。 一旦浏览器正式发布,期望使用IE7的站点访问者数量迅速增加。 确定你的网站已经准备好了。

这篇文章是由 Trenton Moss写的。 为了让他在网上a,他疯狂地利用了网络可用性和辅助功能- - 疯狂地启动了自己的可用性和可以访问性顾问( ),从而使互联网成为一个更好的地方。 他知道很多关于网页设计,并且喜欢像他一样经常做一个网站审查。


相关文章