标记语言——CSS布局(9)

摇摆不定的宽度

我们反对为元素指定边框,内补丁的理由就是实际宽度会随着使用者浏览器的不同而不同,就算在今天,几百万使用IE5.x的用户还是会看到明显偏差的设计结果.同时有个重点必须记住:在这段文字撰写的时候,仍然有太多人在使用IE5以致我们不能忽视这个问题.

所以该怎么办?恩,幸运的是,有个能修复这个问题的技巧,这个技巧可以提供两种不同的宽度,一种给IE5 for Windows,另一种给其他浏览器以便得到正确的盒模型.

盒模型Hack

亲切的Tantek Celik写了盒模型Hack (http://www.tantek.com/CSS/Examples/boxmodelhack.html) 让我们能提供两种不同宽度:一种调整过,只会被Window Internet Explorer 5使用,另一种则给其他所有浏览器使用.

通过IE5和IE5.5才有的CSS解析Bugs,可以指定一个略大的宽度(容纳边框和内补丁),然后以实际的宽度覆盖这个数值,让其他浏览器能显示出正确的结果.

源代码示例

举例来说,如果希望把侧边栏的内容区域宽度设为200像素宽,加上10像素内补丁和5像素边框,那么我们的CSS看起来就像:

#sidebar {

  width: 200px;

  padding: 10px;

  border: 5px solid black;

  }

对IE5 for Windows来说,则需要把宽度指定为230像素(加上两侧内补丁和边框的宽度),接着再以200像素覆盖回来,让符合标准的浏览器得到正确的宽度.

#sidebar {

  padding: 10px;

  border: 5px solid black;

  width: 230px; /* for IE5/Win */

  voice-family: "\"}\"";

  voice-family: inherit;

  width: 200px; /* actual value */

  }

留意IE5 for Windows的值先出现,接着几条让IE5 for Windows认为声明已经结束的规则,在此我们使用voice-family属性,原因单纯只是浏览器认得它的话也不会改变视觉效果,最后指定实际的宽度,覆盖最初的width规则,第二个width规则会被IE5 for Windows忽略.

结果在IE5 for Windows以及其他所有兼容CSS2的浏览器上看起来应该完全相同.没有使用这个hack的话,IE5 for Windows的使用者就会看到比设计还瘦的栏宽.

对Opera友好

对于同样拥有IE5 for Windows解析错误的CSS2兼容浏览器来说,我们必须在每次使用盒模型补丁之后加上一段额外的声明,这个称为"对Opera友好"的规则会让所有符合标准的浏览器不被解析Bug卡住,确保他们能显示出期望中的宽度.

#sidebar {

  padding: 10px;

  border: 5px solid black;

  width: 230px; /* for IE5/Win */

  voice-family: "\"}\"";

  voice-family: inherit;

  width: 200px; /* actual value */

  }

html>body #sidebar {

  width: 200px;

  }

有了这段规则,就可以完全绕过IE5 for Windows错误解析CSS盒模型的问题,让所有人都能看到正确的效果.