CSS Web Design 我爱CSS

CSS兼容：如何解决IE7和IE8的BUG

MrJin@52css.com(52css) — Thu,02 Jul 2009 21:39:10 +0800

　　CSS兼容问题已经是CSS网页布局技术中的重要组成部分，也让广大的CSSer大为头疼，虽然52CSS.com介绍过不少相关的知识与技巧，但是随着IE8的越来越广泛的安装应用，对IE7和IE8的兼容问题，也颇受关注。
　　在以前的文章中52CSS.com向大家说明，IE8会是福音还是又一个光环据称全面兼容标准。
　　http://www.52css.com/article.asp?id=684
　　今天向大家介绍如何解决IE7和IE8的兼容性问题。

　　微软在IE8提供三种解析页面的模式
　　IE8 Standard Modes ：默认的最标准的模式，严格按照W3C相关规定
　　IE7 Standards Modes ：IE7现在用的解析网页的模式，开起机关是在中加入
　　Quirks Modes ：IE5用的解析网页的模式，开起机关是删除HTML顶部的DOCTYPE声明
　　注意：不同模式间的网页在IE8中可以互相 frame ，因此因不会模式下的DOM和CSS渲染不一样，所以会引发很多问题，务必注意如果你的页面对IE7兼容没有问题，又不想大量修改现有代码，同时又能在IE8中正常使用，微软声称，开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题，此代码如下：

Example Source Code [www.52css.com]

　　IE8 最新css hack：

　　"\9"　例:"margin:0px auto\9;".这里的"\9"可以区别所有IE和FireFox.
　　"*"　IE6、IE7可以识别.IE8、FireFox不能.
　　"_"　IE6可以识别"_",IE7、IE8、FireFox不能.

DivCSS布局扩展技巧和用法

MrJin@52css.com(52css) — Tue,30 Jun 2009 22:11:04 +0800

　　CSS网页布局开发中，会有很多小技巧，这之类相关的文章在52CSS.com有许多介绍，这里再扩展一下您所想要得到的知识，相信您会有很多收获！

　　一、ul标签在Mozilla中默认是有padding值的，而在IE中只有margin有值。
　　二、同一个的class选择符可以在一个文档中重复出现，而id选择符却只能出现一次。对一个标签同时使用class和id进行CSS定义，如果定义有重复，id选择符做的定义有效，是因为id的权重要比class大。
　　三、一个兼容性调整（IE和Mozilla）的笨办法：初学可能会碰到这样一个情况：同样一个标签的属性在IE设置成A显示是正常的，而在Mozilla里必须要设成B才能正常显示，或者两个倒过来。
　　临时解决方法：选择符{属性名：B ！important；属性名：A} 或许有时候并没有效果。你可以在搜索更多的BUG解决方法。
　　四、如果一组要嵌套的标签之间需要些间距的话，那就留给位于里面的标签的margin属性吧，而不要去定义位于外面的标签的padding
　　五、li标签前面的图标推荐使用background-image，而不是list-style-image.
　　六、IE分不清继承关系和父子关系的差别，全部都是继承关系。
　　七、在给你的标签疯狂加选择符的时候，别忘了在CSS里给选择符加上注释。等你以后修改你的CSS的时候就知道为什么要这么做了。另外提醒您，不要太疯狂了。
　　八、如果你给一个标签设置了一个深色调的背景图片和亮色调的文字效果。建议这个时候给你的标签再设置一个深色调的背景颜色。因为图片丢失了，也可以保持文字的可读性。
　　九、定义链接的四种状态要注意先后顺序： Link Visited Hover Active
　　十、与内容无关的图片请使用background.时刻记住表现与内容分离。
　　十一、定义颜色可以缩写#8899FF=#89F
　　十二、table在某些方面还是有用武之地的，在遇到内容为数据表格时，不要对它产生憎恨的心理。
　　十三、
　　十四、完美的单象素外框线表格（在IE5、IE6、IE7及FF1.0.4以上中均可通过测试）　
　　table{ border-collapse：collapse； } td{ border：#000 solid 1px； }
　　十五、margin取负值可以在标签使用绝对定位的时候起到相对定位的作用，在页面居中显示时，使用绝对定位的层不适合使用left：XXpx这个属性。把这个层放到一个要相对定位的标签旁，然后使用margin的负值是个好方法。
　　十六、绝对定位时使用margin值定位可以达到相对于本身所在位置的定，这与top，left等属性相对与窗口边缘的定位不同。绝对定位的优势在于可以让其它元素忽略它的存在。
　　十七、如果文字过长，则将过长的部分变成省略号显示：IE5，FF无效，但可以隐藏，IE6有效DIV STYLE=“width：120px；height：50px；border：1px solid blue；overflow：hidden；text-overflow：ellipsis”> 就是比如有一行文字，很长，表格内一行显示不下。
　　十八、在IE中可能由于注释带来的文字重复问题时可以把注释改为：<！–[if ！IE]>Put your commentary in here…<！[endif]–>
　　十九、如何用CSS调用外部字体语法：@font-face{font-family：name；src：url（url）；sRules}取值：name：字体名称。任何可能的 font-family 属性的值url（url）：使用绝对或相对 url 地址指定OpenType字体文件sRules：样式表定义
　　二十、如何让一个表单中的文本框中的文字垂直居中？
　　如果用行高与高度的组在FF中是没有效果的，办法就是定义上下补白就可以实现想想的效果了。
　　二十一、定义A标签要注意的小问题：当我们定义a{color：red；}时，它代表了A的四种状态的样式，如果此时要定义一个鼠标放上的状态只要定义a：hover就可以了，其它三种状态就是A中所定义的样式。只定义了一个a：link时，一定要记得把其它三种状态定义出来！
　　二十二、并不是所有样式都要简写：当样式表前定义了如p{padding：1px 2px 3px 4px}时，在后续工程中又增加了一个样式上补白5px，下补白6px.我们并不一定要写成p.style1{padding：5px 6px 3px 4px}.可以写成p.style1{padding-top：5px；padding-right：6px；}，你可能会感觉这样写还不如原来那样好，但你想没想过，你的那种写法重复定义了样式，另外你可以不必去找原来的下补白与左补白的值是多少！如果以后前一个样式P变了话，你定义的p.style1的样式也要变。
　　二十三、网站越大，CSS样式越多，开始做前，请做好充分的准备和策划，包括命名规则。页面区块划分，内部样式分类等。
　　二十四、固定宽度汉字截断：overflow：hidden；text-overflow：ellipsis；white-space：nowrap；（不过只能处理文字在一行上的截断，不能处理多行。）（IE5以上）FF不能，它只隐藏。
　　
　　

重新组织CSS代码的利器——Styleneat

MrJin@52css.com(52css) — Tue,23 Jun 2009 21:23:25 +0800

　　我们编码的代码往往不够规范，虽然52css.com提供了很多的思路和经验，但依然无法改变代码杂乱的现象。今天向大家介绍重新组织CSS代码的利器——Styleneat。
　　Styleneat 能够把 CSS 的选择器（selectors），子选择器（ sub-selectors）和属性（properties）按照层式结构化重新组织，这样使得程序员更加容易去定义页面区域和查看它们之间的关系。Styleneat 是一个能够帮你重新组织你 CSS 属性的免费服务。

Styleneat

　　比如它会把下面这段 CSS 代码

Example Source Code [www.52css.com]

id1 { width: 100px; }
id1 .class1 { background: #000; }
id1 .class1 a { text-decoration: none; color: #fff; }
id1 .class1 a span { text-indent: 10px; }
id2 { width: 200px; }

　　重新组织成：

Example Source Code [www.52css.com]

id1 { width: 100px; }
    id1 .class1 { background: #000; }
        id1 .class1 a { color: #fff; text-decoration: none; }
            id1 .class1 a span { text-indent: 10px; }

id2 { width: 200px; }

　　Styleneat 提供三种使用方式：

Example Source Code [www.52css.com]

　　1、直接粘贴 CSS 代码。
　　2、上传一个 CSS 文件。
　　3、提供 CSS 文件的 URL 地址。

　　另外 Styleneat 还提供一些选项，如按照 CSS 选择的字母顺序排列，单行格式或者多行格式等。Styleneat 在 CSS 优化方面还是提供了比较多的帮助。

　　http://styleneat.com/
　　
　　
　　

Google谷歌的CSS前景图片合并技术

MrJin@52css.com(52css) — Sun,21 Jun 2009 22:20:56 +0800

　　在52CSS.com以前的文章中介绍过背景图片的合并方法。但不只有背景图片能合并，前景图片同样可以。

　　CSS Sprites工作原理及其对CSS布局的意义、优点和缺点介绍
　　http://www.52css.com/article.asp?id=735
　　浅谈CSS Sprites技术以及图片优化
　　http://www.52css.com/article.asp?id=869
　　再谈CSS高级技巧：css sprites技术
　　http://www.52css.com/article.asp?id=1036

　　在 Google 搜索结果页面中，将其 Logo 图标右键另存为后可以发现，它并非单纯的 Google Logo，而是一块复杂的拼合图片：

　　查看搜索页面源代码，其 Logo 部分代码如下：

Example Source Code [www.52css.com]

http://www.google.cn/webhp?hl=zh-CN" title="Google 主页">Google

其CSS 部分代码如下：

Example Source Code [www.52css.com]

#logo{display:block;overflow:hidden;position:relative;width:150px;height:52px;margin:14px 0 7px}
#logo img{border:none;position:absolute;left:-0px;top:-26px}

　　分析上述代码可知，CSS 中 id=logo 的样式父元素采用相对定位方式，定义了宽度和高度，使用 overflow:hidden 来隐藏溢出部分；而 img 元素则采取绝对定位方式，使用 left 和 top 进行图片定位，这与背景图片的定位是一致的。
　　
　　

CSS调试必备：IE7与IE8共存！

MrJin@52css.com(52css) — Fri,19 Jun 2009 22:04:41 +0800

　　关于新发布的IE8Beta1，网友们都纷纷下载来使用，尝到了功能强大的甜头；有的却因网络流传：安装后会覆盖原来的IE7，并且不能导入IE7的收藏夹的虚假消息。而使大家（特别是工作用的电脑）不敢尝试这新版的浏览器。
　　其实，IE8是支持和IE7“共存”的，而且还有两种方法。并且能导入IE7的收藏夹。
　　笔者是程序设计师，有时也兼页面的CSS构造，因此，IE6，IE7，FF是必需的测试网页工具，至在兼容主流的浏览器。微软新出的IE8，将来也必定是主流的浏览器，网站设计师们也要开始对它下苦功一翻。但听到如要装只能选IE7，IE8其中之一，难道真的要舍弃兼容一个版本吗？答案是不能的。
　　IE8经过笔者的一翻使用与研究，发现了IE8和IE7确实是可以共存的。

　　共存一：IE8内核里本来就带有IE7，这是为了给软件开发者使用的，叫做“IE7模拟器”
　　IE8状态下，如要变成IE7，按下状态栏的“7Emulate IE7”按钮，确定，然后退出浏览器，再重新打开，发现现在就是IE7了。
　　IE7状态下，如要变回IE8，点击一下“7Emulate IE7”按钮，确定，恢复弹出的形状，然后退出浏览器，再重新打开，发现现在就是IE8了。
　　这种使用方法比较麻烦，因为都要关闭，重开，而且不能同时使用IE7，IE8。笔者并不为此罢休，继续摸索着其他方法，终于守得云开见月明。发现了一种可以同时使用IE7，IE7的方法。

　　共存二：这个方法对大家来说也是穿针引线拉，希望能发现更多的方法。首先是本机要先有装IE7，我就再装了个绿色浏览器（GreenBrowser），遨游，南方等等也应该可以，因为绿色浏览器的核心会跟着电脑的浏览器核心变化着。现在再装IE8，看他是否会变为IE8的核心。
　　上面说过IE8里是含有IE7“核心”的，没想到绿色浏览器的核心一直保持着是IE7的，并没有变为IE8，这使我大为欣喜。
　　于是就可以同时使用两种版本了。

　　两种方法在装好IE8后，第一次运行，会提示你设置你个人的喜好，选择以前IE7的设置就可以导入收藏夹了。
　　IE8新增的一些功能：可以方便的查看调试Html源代码，CSS语言和Script；虽然在52CSS.com中，介绍过很多调试工具，但这个工具是很好用的。在Tools工具下的Adds-on插件管理也比较有用，可以用来关闭一些插件；Activities默认集成了邮件使用Windows Live Mail，博客使用Windows Live Spaces，翻译使用Windows Live，地图使用Windows Live Map。通过这种方式，IE8全面的和Windows Live服务结合在一起。
　　
　　

52CSS：CSS Hack 汇总速查一览

MrJin@52css.com(52css) — Wed,17 Jun 2009 21:22:47 +0800

　　由于浏览器之间存在兼容性问题，在制作网页的时候，为了使页面能在不同浏览器中显示相对一致或者其他原因，网页制作人员总结了种种 Hack 方法；在解决兼容性问题之前，这些方法还经常会用到。接下来，52CSS.com将向给大家介绍常用的CSS Hack汇总，以便大家平时的速查。

　　屏蔽IE浏览器（也就是IE下不显示）
　　*:lang(zh) select {font:12px  !important;}  select:empty {font:12px  !important;}  这里select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。

　　仅IE7与IE5.0可以识别
　　*+html  select {…} 当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK。

　　仅IE7可以识别
　　*+html  select {…!important;} 当面临需要只针对IE7做样式的时候就可以采用这个HACK。

　　IE6及IE6以下识别
　　* html  select {…} 这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。html >body  select {…} 这句与上一句的作用相同。

　　仅IE6不识别，屏蔽IE6
　　select { display :none;} 这里主要是通过CSS注释分开一个属性与值，注释在冒号前。

　　仅IE6与IE5不识别，屏蔽IE6与IE5
　　select { display :none;} 这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。不屏蔽IE5.5

　　仅IE5不识别，屏蔽IE5
　　select {…} 这一句是在上一句中去掉了属性区的注释。只有IE5不识别，IE5.5可以识别。

　　盒模型解决方法
　　selct {width:IE5.x宽度; voice-family :"\"}\""; voice-family:inherit; width:正确宽度;} 盒模型的清除方法不是通过!important来处理的。这点要明确。

　　清除浮动
　　select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;} 在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的HACK来对父级做一次定义，那么就可以解决这个问题。

　　截字省略号
　　select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; } 这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾，很好的一个技术。只是目前Firefox并不支持。

　　只有Opera识别
　　@media all and (min-width: 0px){ select {……} } 针对Opera浏览器做单独的设定。

　　以上都是写CSS中的一些HACK，这些都是用来解决局部的兼容性问题，如果希望把兼容性的内容也分离出来，不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式，也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。

　　IE5.x的过滤器，只有IE5.x可见
　　@media tty {i{content:"\";}} @import 'ie5win.css';
　　IE5/MAC的过滤器，一般用不着

　　IE的if条件Hack
　　所有的IE可识别只有IE5.0可以识别IE5.0包换IE5.5都可以识别仅IE6可识别IE6以及IE6以下的IE5.x都可识别仅IE7可识别

　　以上内容可能并不全面，欢迎大家能和我一起把这些技巧都汇总起来，为以后工作的查询提供一个方便，同时在这里感谢那些研究出这些HACK的作者们。
　　更多的发现与收集，欢迎您在52CSS.com参与评论，欢迎您到W3Cbbs.com发贴讨论。
　　
　　

52CSS提倡的CSS代码书写顺序

MrJin@52css.com(52css) — Mon,15 Jun 2009 21:32:18 +0800

　　我们在前面的文章中，多次提到团队协作与代码规范的问题，今天52CSS.com向大家提倡一种CSS代码书写顺序。这样便于阅读，查找与修改属性这语汇，使CSS代码更加的清晰规范。

　　一、显示属性

Example Source Code [www.52css.com]

* display
* list-style
* position
* float
* clear

　　二、自身属性

Example Source Code [www.52css.com]

* width
* height
* margin
* padding
* border
* background

三、文本属性

Example Source Code [www.52css.com]

* color
* font
* text-decoration
* text-align
* vertical-align
* white-space
* other text
* content

　　欢迎发表你的个人看法。共同讨论！
　　
　　

一位52CSS网友的DivCSS网页布局心得

MrJin@52css.com(52css) — Fri,12 Jun 2009 00:33:19 +0800

　　我们在52CSS.com一直强调交流的重要性，只有通过交流才能发现自己的不足，才能明确的知晓自己到底掌握了多少知识，哪些地方不足，哪些地方已经掌握，今天与大家分享一位52CSS网友的DivCSS网页布局心得。DIV+CSS是目前互联网网页制作最热门的方法，但对于完全手写代码，许多网页设计师都望而止步。其实DIV+CSS是很简单的一种布局方式，甚至比任何一种编程语言都要简单(虽然它不能算是编程语言)。
　　首先你要知道，当你开始学习DIV+CSS的时候，你要把以前所有用DW画布局表格的思维方法忘的一干二净(如果你以前是用TABLE布局的话)，然而这项技术更适合刚接触网页制作的人。
　　然后你要知道，DIV+CSS是高成本开发，速度当然是没有你画TABLE来的快，但是好处更多，相信如果你能看到这里，你一定对DIV+CSS的好处也有一定的了解了。
　　最后你还得知道，你所用的工具，你可能认为Dreamweaver很好，没错，它的确不错，但你要认识到，当你熟练使用了这门技术，你就可以在任何文本编辑器中编写网页，甚至在记事本中，而dreamweaver只是充当一个文本编辑器的角色，而你所有的工作基本都在代码视图中完成，在这里我推荐adobe最新的dreamweaver cs4。当然如果CS5出现了我也会去试用它。
　　切入正题，其实DIV+CSS正确的说法应该是XHTML+CSS，说成DIV的原因只是让它能更明确地和TABLE布局方法区分开来，并不是说一个页面里没有TABLE，而是在什么地方使用TABLE，你要认识到TABLE是表格，是存放数据用的，而不是用来布局的。
　　接下来是布局思维方式，可能大家在接触DIV+CSS的时候无从下手，我现在向大家推荐最著名的盒子模型，我也是看了这个模型后一下子就开窍了。
　　你可能会说，好多英文看不懂，不过我告诉你，很抱歉那三个英文你必须记住，而且是最重要的三个，你可以把这么个盒子看成一个DIV，而所有标签都带有这三个属性。
　　正如你所见到的这个是一个方块，而网页呢，是由这么多大大小小的方块组成的，可能以下实例会更明确的让你了解这个盒子。
　　我在这里借用了新浪博客的盒子来说明下，大家可能发现了，其实边框border往往就只有1px的宽度，谁叫它是边框呢。而外补丁margin呢，它代表了DIV(盒子)和DIV(盒子)之间的距离，而内补丁padding则是大盒子(DIV)和里面的盒子(DIV)的距离(盒子(DIV)里面可以放盒子(DIV)哦)。
　　许多基础知识可以在52CSS.com获得，如果需要有更多的交流可以加52CSS的QQ交流群，也可以去W3CBBS.com参与讨论。
　　
　　

DivCSS布局基础：CSS中控制换行的四种属性

MrJin@52css.com(52css) — Tue,09 Jun 2009 22:05:44 +0800

　　在进行DivCSS布局时，需要对文本进行控制，我们在52CSS.com以前的文章中，也讲过这方面的知识，今天系统的向大家介绍一下。CSS中控制换行的四种属性。

一、white-space

　　可以实现HTML中PRE标签的效果，以及单元格的noWrap效果，点此查看示例。

Example Source Code [www.52css.com]

语法：
white-space : normal | pre | nowrap

　　取值：
　　normal：默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行
　　pre：换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为 standards-compliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-compliant mode ，此属性可以使用，但是不会发生作用。结果等同于 normal 。参阅 pre 对象
　　nowrap：强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。参阅 noWrap 属性

　　说明：
　　设置或检索对象内空格字符的处理方式。
　　空格字符，像换行，空格，TAB，在HTML文档中默认的是被忽略的。当此属性设置为 normal 或者 nowrap 时，你可以使用不换行空格的命名实体来添加空格，用 br 元素来添加换行。此属性对你使用文档对象模型(DOM)操作的内容的影响与其对IE显示内容的影响一样。
　　此属性作用于块对象。

　　相关样式：
　　text-overflow
　　将它与white-space结合使用就不用再写程序来判断字符串长度了，点此查看示例。

Example Source Code [www.52css.com]

语法：
text-overflow : clip | ellipsis

　　取值：
　　clip：默认值。不显示省略标记(…)，而是简单的裁切
　　ellipsis：当对象内文本溢出时显示省略标记(…)

　　说明：
　　设置或检索是否使用一个省略标记(…)标示对象内文本的溢出。
　　这个属性仅仅作用于水平内联方向的，普通的西方文本的溢出。内联溢出发生在行内的文本超出可用宽度却没有换行机会的时候。
　　要强制溢出发生并且应用 ellipsis 值，作者必须设置对象的 white-space 属性值为 nowrap 。
　　假如没有换行机会(例如，对象容器的宽度是狭窄的，而内有很长的没有合理断行的文本)，没有应用 nowrap 也有可能溢出。
　　为了使 ellipsis 值被应用，此属性必须被设置到具有不可视区域的对象。最好的选择是设置 overflow 属性为 hidden 。设置 overflow 属性为 scroll 或者 auto 时，此属性也会应用。但是会有滚动条出现。
　　通过选择省略标记，隐藏的文本可以被选择。当选择发生时，省略标记会隐藏而被文本替换。
　　此属性为在DHTML中制作省略标记提供了高效的方法。

二、word-break

　　最常用的控制换行属性，常与下面的word-wrap结合使用，点此查看示例。

Example Source Code [www.52css.com]

语法：
word-break : normal | break-all | keep-all

　　取值：
　　normal：默认值。允许在词间换行
　　break-all：该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
　　keep-all：与所有非亚洲语言的 normal 相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本

　　说明：
　　设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。
　　对于中文，应该使用 break-all 。

三、word-wrap

　　如果你设计的网页不是自适应宽度的话，需要将它设置为break-word，否则可能出现版快错开的情况，点此查看示例。

Example Source Code [www.52css.com]

语法：
word-wrap : normal | break-word

　　取值：
　　normal：默认值。允许内容顶开指定的容器边界
　　break-word：内容将在边界内换行。如果需要，词内换行( word-break )也将发生

　　说明：
　　设置或检索当当前行超过指定容器的边界时是否断开转行。
　　此属性仅作用于有布局的对象，如块对象。内联要素要使用该属性，必须先设定对象的 height 或 width 属性，或者设定 position 属性为 absolute ，或者设定 display 属性为 block 。

四、overflow，overflow-x，overflow-y

　　这个不是严格意思上的控制换行样式，但在某些时候将它设置为hidden可以补充word-wrap的不足，比方你想在限制宽度里仅显示一行文字，而这行文字的长度却超过这个宽度，结合white-space+text-overflow可以达到更好的效果，点此查看示例。

Example Source Code [www.52css.com]

语法：
overflow : visible | auto | hidden | scroll

　　取值：
　　visible：默认值。不剪切内容也不添加滚动条。假如显式声明此默认值，对象将以包含对象的 window 或 frame 的尺寸裁切。并且 clip 属性设置将失效
　　auto：在必需时对象内容才会被裁切或显示滚动条
　　hidden：不显示超过对象尺寸的内容
　　scroll：总是显示滚动条

　　说明：
　　检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
　　所有对象的默认值是 visible ，除了 textarea 对象和 body 对象的默认值是 auto 。设置 textarea 对象此属性值为 hidden 将隐藏其滚动条。
　　对于 table 来说，假如 table-layout 属性设置为 fixed ，则 td 对象支持带有默认值为 hidden 的 overflow 属性。如果设为 scroll 或者 auto ，那么超出 td 尺寸的内容将被剪切。如果设为 visible ，将导致额外的文本溢出到右边或左边（视 direction 属性设置而定）的单元格。
　　自IE5开始，此属性在MAC平台上可用。
　　自IE6开始，当你使用 !DOCTYPE 声明指定了 standards-compliant 模式，此属性可以应用于 html 对象。
　　对于CSS中控制换行的四种属性有何讨论，欢迎你参与52CSS.com的评论，或者到w3cBBS.com发贴。
　　
　　

IE6所不支持的CSS的type选择器

MrJin@52css.com(52css) — Sun,07 Jun 2009 23:48:19 +0800

　　应用IE6所不支持的CSS的type选择器，可以精确的选择各种表单元素。
　　简单，明了，可以分区出各个input控件形态。
　　在前面52CSS.com的文章中，我们向介绍了
　　CSS的expression判断表达式设置input样式
　　http://www.52css.com/article.asp?id=1072
　　type选择器，IE6之前的对web标准支持的不太好的浏览器不能支持。致命……

Example Source Code [www.52css.com]

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml" >

    IE6所不支持的CSS的type选择器 - www.52CSS.com

    input[type="text"]
    {
    background-color:#FFC;
    }
    input[type="password"]
    {
    background-image:url(BG.gif);
    }
    input[type="submit"]
    {
    background-color:blue;
    color:white;
    }
    input[type="reset"]
    {
    background-color:navy;
    color:white;
    }
   input[type="radio"]
    {
    /*In FF,Some radio style like background-color not been supported*/
    margin:10px;
    }
    input[type="checkbox"]
    {
    /*In FF,Some checkbox style like background-color not been supported*/
    margin:10px;
    }
    input[type="button"]
    {
    background-color:lightblue;
    }

This is normal textbox:
This is password textbox:
This is submit button:
This is reset button:
This is radio:
This is checkbox:
This is normal button: