如何让CSS实现多游览器兼容
http://www.cnblogs.com/rubylouvre/archive/2009/08/10/1542476.html
说是实现兼容,其实也只不过为了照顾IE6与IE7,其实不支持标准的对手早就烟飞灰灭,而像firefox,Opera,Safari等更新换代太快,就算有问题很快就被官方处理。因此这篇博文大家最好在IE6中浏览,里面可运行的例子都是为IE6准备的。
选择器
通配符 * :: IE6不支持
类选择器 .class :: IE6元素的class不能超过2个
属性选择器 [att=value] [att] [att|=value] [att(^|$|~)=value] :: IE6不支持
关系选择器 E + F; E > F ; E ~ F :: IE6不支持
属性选择器 [att=value] [att] [att|=value] [att(^|$|~)=value] :: IE6不支持
:first-letter,:first-line,:visited,:link伪类选择器 :: 都支持
:hover伪类选择器 :: IE6只支持a元素(并且一定要有href属性才行),IE7及FF支持a以外元素
:before和:after伪类选择器 :: IE7和firefox支持
结构伪类选择器 ::只有最新的游览器才支持这种CSS3选择符,FF3.5,opera10与chrome。IE全系列歇菜。
说说用法:
E:root 匹配文档的根元素
1.:root { border: 1px solid blue; }
2.//相当于html { border: 1px solid blue; }
E:nth-child(n) 匹配所有在其父元素中排第n个的E元素。n可以是数字/关键字/公式
1.tr:nth-child(3) { …… } /* 匹配所有表格里面排第3的行<TR> */
2.tr:nth-child(2n+1) { …… } /* 2n+1,公式,匹配所有奇数行 */
3.tr:nth-child(odd) { …… } /* odd:关键字,匹配所有奇数行 */
4.tr:nth-child(2n) { …… } /* 2n:匹配所有偶数行*/
5.tr:nth-child(even) { …… } /* even:关键字,匹配所有偶数行li */
E:nth-last-child(n) 伪类同:nth-child的工作方式非常相似,不过他是从后向前数子节点
1.tr:nth-last-child(3n+3) { background-color: red; }
2.tr:nth-last-child(3n+2) { background-color: green; }
3.tr:nth-last-child(3n+1) { background-color: blue; }
E::nth-of-type(n)伪类使用跟其他伪类类似的语法,但是允许你根据元素类型进行选取。
1.body:nth-of-type(1) p{
2. color: #333333;
3.}
:nth-last-of-type同:nth-of-type功能类似,不过也是从后向前查子节点。
DocType
文档类
相关文档:
css满屏布局与ul和li列表 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta content="text/html; charset=u ......
一.文件命名规范
[b]样式文件命名[/b]
[quote]主要的 master.css
布局,版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css [/quote]
[b]CSS ID 的命名[/b]
[quote]页头:header
登录条:loginbar
标志:logo
侧栏:sidebar
广告:banner
导航:nav
子导航:subnav
菜 ......
IE都能识别*;标准浏览器(如Firefox,Opera,Netscape)不能识别*;
IE6能识别*,但不能识别 !important,
IE7能识别*,也能识别!important;
FF不能识别*,但能识别!important;
写两句代码来控制一个属性,区别Firefox与IE6:
background:orange;*background:blue; //
这一句代码写出来时,你用firefox或其它非IE浏览时 ......
1.span 的 overflow :hidden width:70px ; display:block(一点要加上div的话不用加)
2.js动态换背景,换背景 style.backgroundImage = "url('images/bg1.jpg')";
3.用onFocus="this.blur()"来消除链接后的焦点虚线框
4. onMouseOver onMouseOut onClick 三个时间在一 ......