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

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

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

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

对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/).

伪装的栏位

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

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

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

垂直伸展

CSS最容易让人感到挫折的性质之一,是元素只会垂直伸展到真正需要的长度.这代表如果在<div>里放一张200像素高的图片,那么<div>就只会在页面上延伸200像素.

当你以<div>切割页面段落,接着用本章开始时的方法用CSS完成多栏布局时,这就会成为有趣的困境,某一栏可能比其他栏都长(图12-13),当你想为每栏选用独特的背景色彩时,视内容多寡而定,做出两个一样长的栏位可能十分困难.

图12-13 长度不一样的栏位

有几个做法能让阑尾看起来一样长,不受栏位包含的内容的影响.我准备分享我的解决方法(适用于绝对定位布局法),而这个方法实在是莫名其妙的...简单.

第一页上一页 8 9 10

12 下一页

投稿

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

猜你喜欢