摇摆不定的宽度

我们反对为元素指定边框,内补丁的理由就是实际宽度会随着使用者浏览器的不同而不同,就算在今天,几百万使用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盒模型的问题,让所有人都能看到正确的效果.

不止宽度

在这里以"盒模型Hack"达成显示相同宽度,但是这个Hack其实能在任何想为IE5 for Windows提供不同CSS内容时派上用场.任何Hack都必须小心使用,同时只有在真正需要的时候才使用,记住 "盒模型Hack"的使用地点是个好主意,这样才能在未来轻易拿掉它.

本文撰写时仍有上百万网络使用者仍然使用IE5 for Windows,因此这个补丁不可或缺.

下面这段"伪装的栏位"原始出自2004年一月份的A List Apart杂志(http://www.alistapart.com/articles/fauxcolumns/).

伪装的栏位

关于我个人网站的设计,我最常被问到的问题是:

"你是如何让右栏的背景色一路延伸到整页底部的?"

其实这只是个简单的概念,真的.而且这个概念能应用到本章开始所述的每种布局方法上.