`

css学习六：学习《精通css：高级web标准解决方案》

 
阅读更多
[2]官方文档：Cascading Style Sheet Compatibility in Internet Explorer 7http://msdn.microsoft.com/library/default.asp?url=/library/en-us/IETechCol/cols/dnexpie/ie7_css_compat.asp
包括如何应对IE7的变化对已有网页的影响：（My Page is Broken, What Can I Do?）
[3]Details on our CSS changes for IE7（官方文档） http://blogs.msdn.com/ie/archive/2006/08/22/712830.aspx
1基础知识
早期的html内部的结构是很乱，甚至没有结构的。现在html的发展趋势是文档的表现，内容，行为分离。这样做的好处很容易理解，就不详述。以前的文档是表现，内容，行为都糅合在一起的，现在我们要分离，因此，我们需要结构。
为了结构的目标，需要用可以表示意义的标签对文档分类，这样才能按内容管理。按意义分类的好处是我们可以，并且通常是对具有某类意义的文档片断进行一类操作，对css来说就是样式操作。分类的目的有两个：将文档分割为多个片断；每个片断都有其各自的意义，这也是分割的标准。
（X）Html本身包含具有意义的标签，可以标识部分内容。
对于无法表示的内容，就使用div和span。Div对block元素分类，span对inline元素。Span的使用远少于div。用div和span分完类之后，还要加上id或class属性以定义其包含的内容代表的意义。像（x）html本身有意义的标签即可以分割内容，又同时表示了意义。而div和span只能分割内容，意义表示的工作由id或class完成。
1．2 浏览器对不同DTD,DOCTYPE的反应
长久以来不太明白的问题：DTD,DOCTYPE声明：
DTD定义了xhtml，html的版本，浏览器根据版本检查文档的有效性。
DOCTYPE声明描述了DTD。它通常包含DTD的URL，但是浏览器一般不读，只是识别DOCTYPE中声明的类别。
浏览器根据是否存在DOCTYPE，以及使用何种DTD来决定要使用的表现方式（怪异方式quikes mode？标准方式？怪异模式以较宽松的方式显示页面，例如opera7显示IE的框模型）。如果xhtml包含形式完整的DOCTYPE就以标准模式。对html4.01如果包含严格DTD的DOCTYPE就是标准模式，过渡DTD和URIà标准，过渡DTD但没有DOCTYPEà怪异，DOCTYPE不正确或不存在à怪异。根据DOCTYPE是否存在选择表现方式的效果被称为DOCTYPE切换switching，但并非所有浏览器都使用此规则。
主要：xhtml是xml文档，xml文档中一般都有xml声明<?xml version=”1.0” encoding=”utf-8”?>，但是该声明是可选的。同时，要注意到要保证xhtml有DOCTYPE，并且在第一行。
关于DOCTYPE switching的研究：
NOTE: These results should NOT be taken as authoritative. DOCTYPE switching is a tricky thing to test, requiring more work than I've been able to plow into it. Consider the following information a rough guide at best, and subject to change as further testing warrants. Thank you.
Entry
Meaning
Q
Quirks mode
A
Almost-standards mode
S
Standards mode
-
Status unknown
Last modified Monday 27 November 200616:59:47 (Eastern U.S.)
DOCTYPE given
NN6.x
NN7.0
Moz1.0
IE5/Mac
IE6/Win
IE7/Win
No DOCTYPE given
Q
Q
Q
Q
Q
Q
Unrecognized DOCTYPE
Q
S
S
S
S
S
Unrecognized DOCTYPE + URI
Q
S
S
S
S
S
HTML 2.0
Q
Q
Q
Q
Q
Q
HTML 3.0
Q
Q
Q
Q
Q
Q
HTML 3.2
Q
Q
Q
Q
Q
Q
HTML 3.2 + URI
Q
Q
Q
Q
Q
Q
HTML 4.0 Strict
S
S
S
S
S
S
HTML 4.0 Strict + URI
S
S
S
S
S
S
HTML 4.0 Transitional
Q
Q
Q
Q
Q
Q
HTML 4.0 Transitional + URI
Q
Q
Q
S
S
S
HTML 4.0 Frameset
Q
Q
Q
Q
Q
Q
HTML 4.0 Frameset + URI
Q
Q
Q
S
S
S
HTML 4.01 Strict
S
S
S
Q
S
S
HTML 4.01 Strict + URI
S
S
S
S
S
S
HTML 4.01 Transitional
Q
Q
Q
Q
Q
Q
HTML 4.01 Transitional + URI
S
A
S
S
S
S
HTML 4.01 Frameset
Q
Q
Q
Q
Q
Q
HTML 4.01 Frameset + URI
S
A
S
S
S
S
XHTML 1.0 Strict
S
S
S
S
S
S
XHTML 1.0 Strict + URI
S
S
S
S
S
S
XHTML 1.0 Transitional
S
A
S
S
S
S
XHTML 1.0 Transitional + URI
S
A
S
S
S
S
XHTML 1.0 Frameset
S
A
S
S
S
S
XHTML 1.0 Frameset + URI
S
A
S
S
S
S
XHTML 1.0 Strict w/XML
S
S
S
S
Q
S
XHTML 1.0 Strict w/XML + URI
S
S
S
S
Q
S
XHTML 1.0 Transitional w/XML
S
A
S
S
Q
S
XHTML 1.0 Transitional w/XML + URI
S
A
S
S
Q
S
XHTML 1.0 Frameset w/XML
S
A
S
S
Q
S
XHTML 1.0 Frameset w/XML + URI
S
A
S
S
Q
S
Any XML
S
S
S
S
-
-
Any XML + URI
S
S
S
S
-
-
1．3 选择器，cascade，继承
要分意义操作文档，就要选择元素。
为了从文档中选出目的元素，
1. 要使用选择器
l 常用：
类型选择器，后代选择器，id选择器，类选择器。
注意：容易犯错的问题，class的滥用，有时可以通常合理使用上述选择器来解决。因为，有时使用很多的class的目的就是为了区别不同的片断。
l 不常用：
通用选择器。
l 高级选择器：
子选择器，相邻同胞选择器，属性选择器。
2. 还可以根据文档结构之外的因素，比如状态，表单元素或链接的状态。就要使用伪类选择器。
关于选择器值得注意的问题：
IE6不支持：子选择器，相邻同胞选择器，属性选择器。
为了解决这个问题，要使用CSS HACKING，见
另外，针对属性选择器：
选择器带来的问题：
多个选择器可能会选择同一个元素，有3个规则，
1. 首先应该遵守如下规则：
从上到下重要性降低：
l ！important的用户样式
l ！important的作者样式
l 作者样式
l 用户样式
l 浏览器定义的样式
2. 其次，在具有同样重要性时，比较特殊性。特殊性是一个四元组（x,x,x,x）也可表示为十进制xxxx。具体规则不详述，简单来说：
style属性>id选择器>类，伪类，属性选择器>类型选择器，伪元素选择器。
3. 后定义的优先。
Css这种通过规则重要度的比较来判断有效规则的方式称为层叠cascade。
对特殊性的一种使用实践：
l 在body上使用id或类。
对站点所有的页面的body都定义了一个样式，但是想对主页作些特殊处理。因此，可以如此定义css:
#content{}
.homepage #content{}
为了使用该定义，每个页面的body都给一个id content。这种id叫做css签名，通常这样定义：www-site-com。
这样做的另一个好处是可以让用户很容易覆盖你的规则（有必要？），比如：
body#www-site-com{}
这样，能很容易自定义字体。
需要指出：
正确使用继承，能像正确使用cascade那样，减少css选择器数量和复杂性。
管理样式表的必要性是显然的。
将样式表加入到html中：
1. 在style标签之间；
2. 用link标签；
3. 使用@import指令。
永远的话题：注释
1. 建议对css分块，并给出注释。
2. 建议对技巧性code给出注释。
如果css变得很大，就需要处理了。
1. 删除注释和空格：可以利用工具，如css优化器(www.cssoptimiser.com)
2. 最好的方式：启用服务器端压缩。如Apache可以用GZIP压缩，很多浏览器都可以接受该类文件并自动解压，这种方法可以减小80％。这里是详细
多人开发css时为了实现一致性，采用样式指南。
通过制定一些简单的原则，使站点的开发以可控的方式进行，防止css随着时间的推移变得凌乱。下载代码中有一个样式指南示例。
对于大型网站的，复杂的css的处理：
1. 可以这样做：分割css的内容，比如用一个css处理布局，一个css处理版式和设计修饰。再细分，后一个还可以分成单独的css处理颜色。如果存在有很多表单可以用单独的css处理它。如果存在特殊页面，可以制定单独的css。
2. 上面这样做的一个好处在于功能清晰，维护方便。有的css文件可以只在需要时调用，可以减少一定的下载带宽。但是，问题也存在：每一个css文件，就意味着对服务器的一次调用。因此，有人喜好一个包括所有问题的大css。
因此，到底复杂的css文件是决策和个人喜好问题。
根据css基本的布局有关的三个概念：
浮动，
定位，
框模型。
框模型box model，是css的基石，因为每个元素都被看作一个矩形框：
margin空白边，border边框，padding填充，content area内容区域。
1. 元素的height是指content area的搞定，
width是指content area的宽度。
但是IE5.X和6中的框模型里，width是指content area的宽度加padding的
宽度。这是该问题的hack：
2. 空白边叠加问题，只有普通文档流中block元素的margin才会叠加。
一种有趣的情况：假设一个元素，它有margin（上下各10px），但是没有border或padding，并且内容为空。那么其自己的上下margin也会叠加成10px。进一步，如果叠加后的margin遇到另一个元素的margin（10px），叠加的规则依然存在，叠加成10px。
叠加的意义在于：使文档中各段落间的距离保持一致，以及其他类似情况。考虑如下定义：
p{margin-top:10px;margin-bottom10px;}
那么对于
<p>1</p>
<p>2</p>
<p>3</p>
如果不存在叠加，情况是（只考虑p）：文本1与上一个元素间是10px距离，1与2之间就是20px，2与3之间也是20px。
如果存在叠加，情况是：1与上一个元素是10px，1与2也是10px，2与3也是10px。
三个定位机制：普通流，浮动，绝对定位。
涉及到两个模型：视觉可视化模型visual formatting model，定位模型。
1. 视觉可视化模型控制如何将文档树document tree在媒体中显示的问题。
块元素显示为一块内容，块框；
行内元素显示在行中，行内框。
Display属性可以改变上述两个显示性质。
框的分布：
a) 块框从上而下，一个接一个排列，框间距离由垂直的margin控制。
b) 行内框在一行中水平分布，由水平maring，padding，border调整彼此的距离。
c) 垂直上的margin，padding，border不影响行内框的高度。
d) 行框：一行形成的水平框，包括所有的行内框。每个行内框不一定具有相同的高度，因此行框会以能够包含所有行内框的规格来形成自己的高度。
e) 无名框：<div>text<p>p</p>，像text就会形成无名框。
除专门指定，框都是在普通流中定位的。
2. 相对定位，绝对定位是调整元素位置的两种方式。
相对定位以元素的原始位置为基准。
绝对定位以元素最近的已定位祖先为基准，如果不存在这样的祖先就以最初的包含块为
基准，通常会使画布或html元素。
相对定位是普通流定位模型的一部分，而绝对定位不是，因此绝对定位不占空间（？）。
其一个应用就是如果扩大绝对定位的框，比如增加字号，周围元素不受影响。
这个地址相当形象地给出了定位的知识（五星）：
绝对定位是非常有用的，完全可能只使用绝对定位创建出整个设计。
固定定位是绝对定位的子类别，可以用固定定位创建出总是出现在窗口同一位置的浮动
元素。如在www.snook.ca上的博客评论表单采用固定定位，这样页面在滚动时，
该评论表单在页面同一位置不动。如下：
当在文章开始开始处时（第一个图）和文章向下拖动之后（第二个图），评论部分（Contribute your thoughts）始终在窗口的中间位置，没有随着滚动条的滚动而向下移动。
绝对定位在IE5或6的bug：
如果要相对于相对定位的框的右边或底部位置设置绝对定位的框的位置，那么就需要确保相对定位的框已经设置了尺寸。
固定定位在IE6中不支持。
Jonathan snook用javascript解决了这个问题。
另外一个：position:fixed for Internet Explorer
3. 浮动
为什么要float：布局需要
有这样的html：
<p>
...text...
<img src="jul31-03-sm.jpg" height="200" border="0" class="picture">
...text...
</p>
<p>
...text...
</p>
如果没有float的效果：
为了达到下图所示的效果：文本环绕在图片周围，而使用了float。
注意：所谓浮动，其实是只浮，不动的，要动除了定义float外还要再作进一步处理。
浮动元素的使用时存在一个所谓“清理”的技巧，详见：
以及浮动的介绍：
Containing Floats
Floatutorial simple tutorials on css floats（详细）
图像是网页中一个很重要的元素，但是存在滥用。
几种应用：
背景，
通过设置位置为标题加上图标。
注意：
l 使用百分数指定图片的位置的时候，是使用图片上的对应点来定位的。就是说，如果指定图片的垂直和水平距离是20％的话，意味着图片本身上面距离图片左上的20％，20％位置那个点与父元素的20％，20％位置对齐。
l 另外，建议不同时使用keyword（left，center等）和百分数，浏览器支持有问题。
几种：
1. 固定宽度的；
2. 灵活的，可以在水平上伸长的。
注意：如果被设置了背景图片，那么块元素不会在水平方向上扩展，因为它必须跟背景图片的宽度一样。换句话说，没有背景图片的时候，块元素会最大限度充满水平方向的空间。
使用技巧：
sliding doors technique滑动门技术。详见：
使用圆角框的地方还很多，可以使用javascript和DOM，更多见：
3. 更灵活的；
另外，可以利用背景色和白色的位图角蒙板来实现圆角框，这样不同颜色的圆角框由不同颜色的背景色负责，而白色的位图角蒙板负责以圆角的方式将框的四角遮住，这样也实现了圆角框效果。这称为mountaintop corner山顶角。这种方法只用于简单的框，但是使用灵活。
可以用photoshop加阴影，但是显然不好。现在用css。
1. 简单阴影
利用负值的空白margin偏移：（www.1976design.com, Dunstan Orchard），
原理：将一个大的阴影图像应用于div的背景，然后利用负值margin偏移。
利用相对定位偏移：Clagnut
2. 模糊阴影（效果更好）：
利用png，蒙板，一个无语义的div。
3．3 图像替换
使用文本的意义之一：可以让搜索引擎搜索，可以copy等。但是虽然可以通过控制文本的样式来控制其显示方式，但是css或html有的样式毕竟有限，因此有时需要用图像的形式来控制文本的显示，典型比如网站logo。
但是开发人员不愿意将图片做为html文档内容的一部分嵌入，而只是以背景图片的方式嵌入。同时在文档中包括文本以便保留有文本的优点（比如可搜索该段内容，而如果只有图片的话，显然就不能搜索了），但是用css将文本隐藏。
注意一个概念：Css是对文档样式的控制，背景也是一种样式。但是，如果说图片是文档的内容即组成文档的一部分，而不是文档的样式，那么就应该直接嵌入html代码的相关位置了。
1. 图像替换存在一个问题，很多替换策略对于屏幕阅读器（将屏幕显示转换为声音或盲文）是无效的，所以主张少用，但是有时，比如需要特殊字体，而任何系统都没有的，就需要图片来显示。
2. 另一个问题，如果关闭图像，就算有css也没有用（by the way，哪个笨蛋这么干？外国笨蛋？）
图像替换image replacement方法：
1. FIR（Fahrner IR）：Todd Fahrner，详见：
Using Background-Image to Replace Text
FIR造成的问题是，因为使用了display:none来隐藏文本，但是很多屏幕阅读
器会忽略该规则设置的元素，因此完全忽略该文本，也就无法转换为声音或盲文。
2. Phark：可以用于屏幕阅读器。
不用display:none隐藏，而是对文本使用一个很大的负值缩进，如：text-indent:-1000px
3. Gilder/Levin，最安全的方法：
原理：将图像覆盖在文本上，这样就算关闭图像显示的功能，也可以看到文本。
4. IFR，sIFR
因为image replacement要解决的问题之一是计算机中不存在的字体。因此，IFR，sIFR用flash来解决这个问题：
用javascript搜索文档，然后将文本替换为一个flash。它并不为每段文本创建单独的flash，而是将被替换的文本放回一个重复的flash，其余的工作由flash和javascript做。并且：flash中的文本是可以搜索的。
详见：作者所写：
另，有人改进了IFR,称为sIFR，可以操作多行文本：
锚链接可以说是万维网的基础，因为它将不同的网页连成了一个网的结构。
最简单的首先是用类型选择器选a。
但是为了对不同的链接状态进行控制，还要用:link,:visited,:hover,:active，
并且这个有使用顺序LoVeHAte。
复杂的下划线：
利用上面四个伪类可以重新定义自己的下划线，比如
1. 将线换成点线，当hover时才显示为直线
2. 利用图像做链接的下划线，
3. 利用gif动画做下划线。
链接使用中的建议：
1. 对链接使用一些可以标识链接类型的图标：
比如，email
指向一个外部的链接
指向可下载内容的链接
2. 将做为行内元素的锚显示为display:block，并加以修饰（背景色，border），这样可以很清楚地看到行内存在锚点。
翻转rollover问题：
即，当鼠标停留在链接上的时候变化背景色，文本的颜色之类。
翻转方法：
1. 简单翻转，直接利用hover，修改背景色。
2. 利用图像翻转：
1) 如利用两个背景图，通过换背景图来翻转。问题是当第一次装载鼠标停留时的
图片时会有短暂的延迟。
2) Pixy样式翻转：使用单个图片来实现翻转，
(Fast Rollovers Without Preload,
如下

这是一个链接
这样只要通过偏移图片的位置来制造翻转的效果。

这是一个链接
做法是：正常情况下，将上面的图片对准左边，如下：

这是一个链接
翻转时对准右边，如下：

设定已访问的样式：
这是设计人员通常遗忘的事情。在主内容区设定已访问样式可能会造成凌乱的感觉，因此应该慎重使用。但是在边栏或子导航栏中使用已访问样式是很合适的。
可使用Pixy翻转来设定已访问样式，如使用下面这个图片：
css提示：
可以用javascript和css结合来实现提示。
但是利用链接的hover状态和绝对定位，通过纯css也可以实现，如：
<p><a href=””>some text<span>(tooltips)</span></a>other text</p>
a {position:relative;}
a span{display:none;}
a:hover span{display:block; position:absolute; top:1em;
left:2em}，就像
注意：ie5中对此无效，要修正：
a :hover{font-size:100%}，
为什么用此法修正没有理论依据。
safari也无效，还无修正。
5 对列表应用样式，以创建导航条和图像映射
通常会用列表来作导航条。
注意：IE和Opera对列表的左margin进行缩进，Safari和Firefox对左padding进行缩进，为了一致性建议对列表做如下初始化定义：
ul{margin:0;padding:0;list-style-type:none;}
1. 简单的列表样式应用：
对每一个列表项加一个图标,如下
2. 稍复杂的垂直导航条
如上的效果，利用了Pixy来实现图片翻转。
另外一个值得注意的地方是：图片是40px高，每个链接区也是40px高，并且观察一下背景图片，
可以看到该图片上下边缘都是有边缘线的。如果直接设定40px的图片全部填充
40px的链接区，那么上下两条线会重叠。
因此需要处理：将链接区设为39px，图片与其底部对齐，这样除了第一个“HOME”的上面没有线之外（被截掉了），上下间都只有一条线。
因此，再对第一个处理：
li.first a{height:40px;line-height:40px;}
3. 在导航条突出显示当前页的技巧。
可以想象一下，页面左边是整个网站的导航栏，右边是具有的各个分栏目页面。可以突出显示当前所在的分栏目，有必要将左边导航栏的相应链接突出显示。
方法：给每个页面的body一个id或class名，从而区别页面所属的分栏目。在导航栏中指向各个分栏目的链接中定义相同的id或class名，然后利用body的id和导航栏里的id的唯一组合来判断当前页面所属的分栏目。
详见：
Highlight the Current Page with CSS: The Body ID/Class Method
or
4. 水平导航条
5. 简化的滑动门标签页式的导航条
6. 图像映射image map
图像映射是在图像中定义热点hotshot。
可以使用列表，锚，高级css创建简单的图像映射。
详见：
CSS Image Maps
How to create an image map using css
一种特殊风格的image map：flickr image map：
Creating a Flickr Style CSS Image Map
7. 远距离翻转remote rollovers
就是说在页面上有多个地方指向同一个地址，当鼠标停留在任何一个地方的时候，其余相应地方都会改变显示方式，并且显示方式是不同的。
现实方式：在一个a中嵌套多个元素，这样就有多个地方指向一个地址。然后使用绝对定位对这些元素进行单独的定位，它们就会分散到不同的位置。当然，每个元素要给出不同的id或class，以便在需要显示时做出不同的反应。
一个实例: http://dbowman.com/photos上的图片显示方式就以remote rollover来显示上一页，下一页这样的提示。
8. 定义列表
html中有三种列表，无序，有序，定义列表。
定义列表由定义<dt>,多个定义描述<dd>组成。
有人用此列表对相关元素进行结构性分组，比如创建产品清单，图像库，表单，页面布局之类的东西。
这是一个好的想法。
但是，div其实可以做这类工作的，也许它没有定义列表有意义，但是可以人为赋予其意义的。
使用定义列表的一个不好的因素是：其使用理由跟使用表格布局的理由一样。因此，有人建议不用。
更多：
6 对表单form和表格table应用样式
表单渐渐成为了web上交互的重要手段，表单过去常用表格来布局，但是现在我们使用css。
表格正在恢复其本来的用意：显示表格数据，而不是页面布局。
表格特有元素：
summary，
caption，
对于大型表格thead，tbody，tfoot的逻辑划分比较有用。
thead，
tbody，可以有多个tbody，这样可以将表格内容化为多个部分。
tfoot，
控制行和列，
tr可以用来控制整行，
col，colgroup可以控制整列，但是浏览器的支持不多。
表格的边框有两种模型：
单独的，每个单元格周围都有边框
叠加的，单元格共享边框。
大多数浏览器都是单独模型，建议使用叠加模型。为此
border-collpase:collapse.
Css的border-spacing可以控制单元格间的距离，但是IE6不理解，所以不使用。只能在table元素中使用cellspacing属性，该属性是表达样式的，因此它的使用是与结构和表现分离的思想不一致的。
因为对col的支持不够，所以如果为了好看，想对每一列的右边加一条线作为右border之类操作，只能通过将每个cell的右border设为一条线的方式。
表单form中可以帮助表达结构和意义的元素：
fieldset，对field分组，以管理。
多数浏览器会在fieldset外围加上边框，如果要取消边框，可以设其width为0。但是对opera必须设置为透明。因此，下段代码可以同时应对opera和非opera,fieldset{border:solid 0 transparent}。
Label，可以增加form的可访问性，
在很多浏览器中单击lable可以使相关联的form元素获得焦点（IE不行），并且对于使用辅助设备（如，屏幕阅读器）的用户特别有用。
关于css对form的样式控制问题，下文只给出了一些提示性信息，可以参见下例地址以获取详细信息：
Form的基本布局：
例，
<fieldset>
<legend>some text as description</legend>
<p>
<label>
<!--some detail-->
</label>
</p>
<p>
<label>
<!--some detail-->
</label>
</p>
</fieldset>
注意：是否在form中使用p使一个有争议的话题。使用p的目的是如果关闭css也可以在在显示上将各行分开。也可以使用div来达到类似目的。
技巧：
为了将label显示在表单元素的上面，
只要display:block。
在不同的浏览器间文本输入框的宽度是不一样的，
所以要显示地输入宽度。文本区域也有类似问题。
修饰form：
针对高级浏览器可以进行一些修饰工作。
比如，
1. 在获得焦点时改变元素的背景色。
2. 针对firefox，将文本框和文本区域在外观上设置地表现一致。因为firefox
对这两者的显示方式不太一致。因为是专门针对firefox的，所以可以使用
属性选择器来选择文本输入元素。
3. 必填域：
复杂的form布局：
1. 对于长，复杂的form，
垂直间距是一个问题，因此应该将lable和对应元素水平布局。
2. 关于lable的问题：
有时不想显示标签，但是注意标签出现在代码中并且供屏幕阅读器使用，lable仍然有必要。
3. 处理多列复选框，或单选按钮
一种较理想的方案：将全部的复选按钮或单选按钮放在一个fieldset中，然后用fieldset的legend作为标签。但是因为不同的浏览器对fieldset的legend的缩进方式不一样，所以该方案是有问题的。
因此，在标签问题上改用“标题”元素，如h2，然后改变其字体以让它与其他的label在外观上一致。
4. 表单反馈信息，比如指出email地址不合法之类。
让设计居中：
长文本难以阅读，并且现在的显示器越来越大，居中可以让文本易于阅读。
因此居中设计很时髦。
居中的两种方法：
1. 自动margin：
<body>
<div id="wrapper">
</div>
</body>
对上，只需定义div的width，然后将其水平margin置为auto。
#wrapper {
width: 720px;
margin: 0 auto;
}
对IE而言其怪异模式不支持自动margin。因此利用IE的另一个错误：text-align:center将所有元素居中，而不只是文本。为此，如下：
body {
text-align: center;
}
#wrapper {
width: 720px;
margin: 0 auto;
text-align: left;
}
最后，为了让netscape6能正确显示，还有工作。Netscape6中当浏览器窗口的宽度小于作为容器wrapper的div的宽度时，div容器的左边会跑到屏幕的外部，就无法访问了。因此，必须将body的最小width设为大于容器div的width：
body {
text-align: center;
min-width: 760px;
}
#wrapper {
width: 720px;
margin: 0 auto;
text-align: left;
}
2. 使用定位和负值的margin
先定义wrapper的width，并将position设为relative，left为50％，这样将wrapper的左边定位在页面的中间。再设定一个负值的margin，其值的绝对值等于wrapper的width的一半，就将wrapper向左移，使整个wrapper能够居中。
#wrapper {
width: 720px;
position: relative;
left: 50%;
margin-left: -360px;
}
基于浮动的布局：
具体的方法详见：
之Tutorial 8. Liquid two column layout
和Tutorial 9. Liquid three column layout
1. 两列的浮动布局，
效果图：
2. 三列的浮动布局。
效果图：
固定宽度的优缺点：
优点：知道什么东西在什么地方。
缺点：
1. 在不同分辨率时，用户的浏览体验显然不一样。高分辨率导致原始的设计缩小在屏幕中间，低分辨率导致设计屏幕生成水平滚动条。
2. 行长和易读性问题。
固定宽度对默认的字体大小没有问题，但是当字体变大时，每行的长度不变就会使每行看上去很挤，且整个空间将被挤满。
3. 另外，因为宽度一定，所以在高分辨率的情况就不能充分利用空间了。
流体布局liquid layout：
使用百分数，而不是px来定义，因此可以根据浏览器的窗口而伸缩。
问题：因为可以伸缩，所以当窗口小时列的宽度就会小，以至于不能阅读的情况出现。当然这种情况本来就没有意义。无论哪种布局窗口太小都没法读。但是当页面具有多列时，这可能就是一个问题。因此解决方案：有必要用px或em固定其最小width。
上面是流体布局的效果图，可以看到页面内容根据窗口大小而伸缩。而设置固定的最小width的意义在于：就本例，如果不设置body的最小width为720px。则当窗口小于720px之后，随着窗口的缩小页面将继续缩小，以至阅读困难的情况发生，如下：
可以看到当窗口缩小到如图所示的时候，已经没法看到第三列了，第三列的位置已经被挤到很下面了，如下图。
这就是所谓阅读困难的含义。如果设置了body的最小width为720px的话，可以看到当窗口小于720px时，会产生滚动条，在通用大小的窗口下面可以对比一下效果：
弹性布局：
流体布局有个问题无法解决：
流体布局是基于百分数的，所以可以伸缩，因此可以充分利用空间。但是还是因为
这个特性，当显示器很大时，因为基数大，所以得到的结果显然也很大。因此，还是产生了一行很长的情况。
因此，弹性布局基于字号，以em为标准来布局。当字号增加时可以在行长保持在可阅
读的范围。
弹性布局的问题：
1. 具有类似固定布局的问题，比如不能充分利用空间（？）。
2. 当字号变大时会造成宽度大于浏览器宽度，从而导致滚动条。为了防止这种情况的话，要设定100%的max-length，但是IE6不支持。
Faux列：
下面这个网站，有很多关于bug的东西，以及其他有用资源。
关于IE7中的hack：
CSS Hacks and IE7
filter：
对特定浏览器显示或隐藏规则或声明的方法。
Filter实现的根据是：
1. 解析bug：应该指的是浏览器在解析css文档时出现的问题，比如有人说opera
的有些版本在解析UTF-8的css时会忽视css文档中的第一条规则，不论这个报告是否正确，这就是一个parsing bug的例子。
2. 某特定浏览器未实现或错误实现的css声明和规则：比如现代浏览器通常会
根据上面两个方面来设计的filter，就具有在某些浏览器显示规则，在其他浏览器隐
藏规则的能力。
基于bug来实现的filter是不安全的，比如bug被修复，bug在新版本中有了新的
表现。最安全的filter依赖于未实现的css。
Hacks：
实际上浏览器的patchs，用来解决特定的浏览器的bug。Filter是一种特殊的hacks。
对hack和filter的使用建议：
1. hack和filter是解决问题的最后手段，
如果css没有实现你想的效果，先检查是不是你对css的认识不正确，然后检查有没有可以替代的其他方法，最后才是使用hack和filter的时候。
2. Hack可以与其他css语句放在一个文件了，
为了管理，hack还可以单独在一个文件中。
对不同的浏览器过滤整个css文件：
1. IE的有条件注释，
对IE有效
[1]<!-- [if IE]
<style type="text/css">
@import ("ie.css");
</style>
-->
[2]对IE特定版本有效：
<!-- [if IE 5]
<style type="text/css">
@import ("ie50.css");
</style>
-->
[3]对等于（e）或高于（gt）指定版本的IE有效：
<!-- [if gte IE 5.5000]
<style type="text/css">
@import ("ie55up.css");
</style>
-->
[4]对低于指定版本的IE有效：
<!-- [if lt IE 6]
<style type="text/css">
@import ("ie.css");
</style>
-->
2. 带通过滤器band filter
带通的意义：除去高于的，除去低于的，对中间指定的有效。
参见：
[1]让css对IE5,5.5/WIN有效：
@media tty {
i{content:"/";/*" "*/}} @import 'ie5x.css'; /*";}
}/* */
[2]让css对IE5.2/MAC有效：
@media tty {
i{content:"/";/*" "*/}}; @import 'ie50win.css'; {;}/*";}
}/* */
上面两种带通filter为什么会有用，参考给出的链接。
过滤单独的规则和声明：
1. 子选择器：IE6以下不支持，IE7似乎支持，因此使用子选择器的规则对IE6以下隐藏。
2. 属性选择器：同上。
3. 星号html：
相当有用，过滤IE6以下所有版本，即区分IE和非IE，IE7似乎要改正过来了。
原理：IE中html文档的第一个元素不是HTML，IE有一个匿名的根元素。
形式：
html{...}
4. IE/MAC注释hack
IE/MAC对注释中的转义字符/，理解错误，不认为是注释的一部分，而是试着去理解。因此，如下的代码中，
/* Hiding from IE5/Mac /*/
#nav a {
width: 5em;
}
/* End Hack */
第一行的注释中有/，因此在IE/MAC中第一行注释没有解释，整个上面的代码都是注释。而在其他浏览器中，只有第一行和最后一行才是注释。
结合星号html，下面的代码可以过滤所有WIN下的IE6及以下的浏览器
/* Hiding from IE5/Mac /*/
* html {
height: 1px;
}
/* End Hack */
5. 转义字符属性hack：the escaped property hack
IE5.X/WIN忽略转义字符，
#content {
w/idth: 100px
}
上面代码中，IE5.X/WIN认为属性名是“w/idth”，结果是没有这样的属性存在，因此忽略改声明。其他的现代浏览器会认为是”width”。但是注意：/不能在数字前，或a到f前，这样会被认为是16进制。
6. Tantek的box model hack
该方案针对的是著名的IE框模型，在历史上来说，有很重要的历史意义。但是现在有更好的方案来解决box model的问题。
7. 简单的box model hack
IE的box model的问题就是不能正确计算content的width，因此需要对IE的width和其他浏览器中的width区别对待，下面就是区别的方法：
* html #content {
width: 80px;
w/idth: 100px;
}
html #content {
width: 100px;
padding: 10px;
}
第一个规则中，区别了IE6和IE5,因为IE6似乎已经没有问题了。
8. ！important和下划线underscore hacks
可以用这个方案对WIN下的IE6及以下和其他情况分开来。
！important：
原理：WIN下的IE6及以下，对一条规则rule中的多个属性property的处理有问题。会忽视第一个声明declaration，如果它使用！important的话。
#nav {
position: fixed !important;
position: static;
}
undercore的原理：
除了IE6/WIN及以下，其他的浏览器不能识别以undercore开头的属性，而IE6/WIN及以下，会忽视undercore并识别该属性。
#nav {
position: fixed;
_position: static;
}
如上，static被IE6/WIN及以下识别，fixed将被其他浏览器识别。
注意：undercore在IE7中已经不支持了。即在IE7中_position是错误的属性。
9. the owen hack
上面8个hack针对的是ie，owen针对opera6及以下和IE6/WIN及以下。
Opera6及IE6没有实现first-child，因此，下面的代码可以过滤它们和其他浏览器。
head:first-child+body {
background-image: url("bg.png");
}
注意：IE7能够识别上面的代码了。
下面的代码只过滤opera6及以下：
html>body #getFirefox {
display: static;
}
head:first-child+body #getFirefox {
display: none;
}
分享到：
| [翻译]Scott Mitchell 的ASP.NET 2.0数据 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics