位置：首页>> 网络编程>> 网页设计>> [翻译]标记语言和样式手册 Chapter 12 CSS布局（10）

[翻译]标记语言和样式手册 Chapter 12 CSS布局（10）

作者：zhaozy　来源：3user.com　发布时间：2008-02-13 14:19:00　

标签：布局,样式,标记,css,手册

摇摆不定的宽度

我们反对为元素指定边框,内补丁的理由就是实际宽度会随着使用者浏览器的不同而不同,就算在今天,几百万使用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的使用者就会看到比设计还瘦的栏宽.

第一页上一页 8 9

11 12 下一页

投稿

[翻译]标记语言和样式手册 Chapter 12 CSS布局（10）

猜你喜欢