杰策网新功能正在紧张建设中……在线服务QQ:21004927,在线交流及技术讨论群:37665877,217688362,217688193。我们口号:帮助别人就是帮助自己!谢谢广大网友的支持!杰策网新域名:ijiece.com(爱杰策)

css全局样式兼容使用说明global

一键转帖: 分享杰策网至人人网  分享杰策网至开心网  分享杰策网至QQ空间  分享杰策网至新浪微博  分享杰策网至QQ书签  分享杰策网至豆瓣  分享杰策网至51  分享杰策网至Baidu搜藏  分享杰策网至Yahoo收藏  分享杰策网至Koudai分享  推荐给好友

最大限度精简的代码
 跨浏览器1px 的兼容

思路要点之一:绝不考虑使用table,横向布局用带有float的div或li取代td。慎用ul li,当有重复单元时可使用ul li,没有重复的单元就别用ul,那样代码看上去很不整齐。
思路要点之二:最大限度利用ul li的优点。用ul li可以减少class=””的声明数量,当你把一套重复单元放进li之后,在ul里定义一个class=””就足够了。当然会付出代价,ul的兼容问题比div成倍的多。
思路要点之三:所有的空白使用margin填充,尽量不使用padding。要问原因,我只能这样说,padding能用margin替代,反之不行,只使用margin,当处理兼容问题时,你可以把焦点仅放在margin上而不用考虑padding。
思路要点之四:不给任何非图片背景类的容器定义height具体值,让容器自适应内容高度,好处一大筐,坏处一大箩,说说坏处吧,在调两个容器同高对齐时,要反复截图量高,而且要在不同浏览器下截图,量完高,还要计算出合适的margin-top来填充。
思路要点之五:能用一层解决的决不用两层,尽量减少嵌套,严厉禁止ul li 下再套 ul li,后果自负,目前为止我还没尝试过ul li嵌套ul li,对此法的实践属空白,理论上来说,此法会带来很多bug。
思路要点之六:css样式分类很细,需要使用多重class声明。例如:class=”left bd orange”,排名不分先后。
思路要点之七:熟悉各浏览器对样式解释的不同点,认真做好工作笔记,准备好4大浏览器,调试兼容,再开一个photoshop,随时截图做测量。制定完美的目标,那就是:精确到1px的兼容。
 
样式的优先级
在这之前先讲解特殊符号的含义——‘+’ ’_’ ’ !important’,这类特殊符号是针对不同浏览器识别的。打个比方,就象家长去幼儿园认领孩子,看到头上贴着’+’这个符号的,哦,这是ie家的孩子,firefox和opear家长是不认得的,当然符号不止3个,但有这3个就能满足大部分的需要了。
‘+’ 加上该符号的样式只有ie才会认领
‘_’ 加上该符号的样式只有ie6才会认领,ie7不会认领
‘!important’ 在同一条样式定义中即大括号{}中,firefox、opera优先认领,ie不认得即忽略’!important’字符串。在非同一条样式中即不同的大括号中{}标有‘!important’的样式对所有浏览器均属优先认领。网上有说ie不认‘!important’的,大错特错了。
例:
<style type="text/css">
.def{background:yellow;+background:blue;_background:red;}
</style>
<div class="def">dd</div>
结果:ie6下是red色,ie7下是blue色,firefox和opera下是yellow色
例:
<style type="text/css">
.def2{background:black !important;}
.def1{background:yellow;+background:blue;_background:red;}
</style>
<div class="def1 def2">dd</div>
结果:所有浏览器均black色
 
优先原则一:文本从上到下,后出现的样式优先于前面出现的同一样式
例:
<style type="text/css">
.def1{background:black;}
.def2{background:yellow; }
</style>
<div class=" def2 def1">dd</div>
结果:所有浏览器均yellow色,注意:与class=”” 引号内的顺序无关,只看.def1和.def2在声明时的顺序,.def2后声明的所以权重高。
优先原则二:id声明(即 # 开头的样式)> class声明(即 . 开头的样式)> 标签声明(即 类似 div 开头)
以上三种声明处于不同的量级,份量上,div 开头相当于 1 重,. 开头相当于 1公斤 重,# 开头相当于 1吨 重。
例:
<style type="text/css">
#bb{background:pink}
.def{background:black;}
div{background:yellow; }
</style>
<div id=”bb” class="def">dd</div>
结果:所有浏览器均pink色,注意:虽然按优先原则一,后出现的权重高,但那只是在同样重量级下的比较,优先原则二各重量级别就不同了。
优先原则三:数量取胜。如果同一个样式声明即一个大括号{}由多个 # . 或 div 组成,则权重按出现符号的量级增加
比如:#bb #tt #dd {background:red} 则重量等于3吨
#bb .tt ul.dd li {background:red} 则重量等于1吨2公斤2克,这么精确的重量,就不需要举例了吧。
再次说明:优先原则一只适用两个样式声明同样重的情况
优先原则四:‘!important’。相当于无限重量,在之前已经有说明,需要注意:ie下,在同一条样式声明即一个大括号中出现的!important 会被随后出现的同名样式冲洗掉。
<style type="text/css">
.def1{background:yellow !important;background:red;}
.def2{background:green;}
</style>
<div class="def1 def2 ">dd</div>
结果:ie下,green色,background:yellow !important被后面的background:red冲洗了,而background:red与background:green的较量中,前者败在优先原则一之下。
优先原则五:近水楼台。<div style=”background:black”></div>直接写在元素体内的style优先级别最高!(仅次于!important)用重量来形容,可以定为百万吨量级。
<style type="text/css">
.def1{ background:red;}
</style>
<div class="def1 " style="background:black">dd</div>
结果:black色。
<style type="text/css">
.def1{ background:red !important;}
</style>
<div class="def1 " style="background:black">dd</div>
结果:red色。
<style type="text/css">
.def1{ background:red !important;}
</style>
<div class="def1 " style="background:black !important">dd</div>
结果:black色。
注释:!important 的无限重量说不太通,大家知道,两个无限的数是没法比较大小的,如果两个样式定义都加了!important,是否就无法比较呢?
不是的,所以,请将!important的无限重量级理解成千万吨级别吧。
 
所提供样式可以分为以下几类:
a>     即标记优化。tag optimization
包括对body,td,select,input,form,ul,li,img,h3,p的优化,有待扩充。主要优化margin,padding,font-size
强调几个比较重要的,也是较常出现引发问题的。
Form{margin:0px;}有时页面上莫名出现了空白,很多时候是因为忽略了form的margin
Img{border:0px}如果没有border:0px; 当给<img />套上<a/>时,图片会出现丑陋的边框色
Input{font-size:12px;}这可是很重要的哦,没有font-size限制的密码框会呈现超大的圆点并且撑大input框
Body{"">宋体} 也许大家不会留意到,如果不加这个属性,在font-size:12px下,ie里文字的实际占高14px,而ff里实际占高是15px,当然即使加了,在opera下文字占高还是不一样的,这就需要在任何文字情况下不要忘了line-height或height。
h1{font-size:14px;margin:7px 0px;}
h2{font-size:14px;margin:7px 0px;text-align:left}
h3{font-size:14px;margin:7px 0px;text-align:center}
h1-h3 建议所有页面加粗的内容用h1-h3取代自定义的font-weight,SEO教导我们使用 h 可以提高搜索效率。
b>     部分。可以修改或增加你喜欢的链接样式。link
注意.lk_l a{text-decoration:underline !important} 和 .lk_n a{text-decoration:none !important}的使用
c>     故名思意。当你需要做测试时,可以用到的,例如,你想看到一个div的边框只需要往class里敲入两个字母 ‘bd’for testing
.lb 使用范例:<ul class=”lb”><li></li></ul>这样就能看到ul下所有li的边框了。
d>     部分。重头戏来了,有必要一个个详细说明了。common
.clr{clear:both}为了保留之前的习惯,做的一次向下兼容。需要说明,clear层样式在
.c{clear:both;overflow:hidden;+overflow:visible}里已经重新定义,请尽量使用新样式,并牢记新样式只能在单独的clear层使用赌东道赌东道赌东道的 的的赌东道赌东道赌东道的 的的
——什么是单独的clear层?<div class=”c”></div>就是,除了.c样式没其它className,并且<div/>内为空。
为什么要重新定义?完全出于兼容opera考虑,最近才做opera下的兼容,还是源于同事对opera的推荐。(如嫌麻烦,不必深究,用就行了)
.l{float:left;display:inline}   最常用的属性了。但注意,新的定义里多了display:inline,由于在当前构架下,多使用margin布局,而float元素在ie6下有著名的double margin bug,解决方案即给float元素加display:inline,当然,所有的float元素都加上这条属性不是完全没问题,ul就会稍微有点问题,在后面会有针对这类问题的样式解决,比起给全局的float元素解决double margin问题要省事的多。
.f{width:100%} 该属性的作用不言而喻,设置本层的宽度为上层的宽度。需要强调:本属性与padding、border、margin-left、margin-right一起使用要特别小心,这些属性会给额外增加元素的实际宽度,在ie下多余的宽度会撑大上层元素,而ff和opera下则不会有撑大现象。
.z{zoom:1} 非常重要的一个样式,用来解决ie6 下的块级元素layout上呈现的多种bug。
.h{width:50%;+width:49.99%} 跟上面的属于同类,设置本层宽度为上层宽度的一半,至于为什么49.99%       我也不想的,ie6不让50%通过嘛。下面是测试代码(需要有global.css样式文件引用)
<div class="bd">
<div class="l h bg h17"></div>
<div class="r h bg h17"></div>
</div>
.b .s .m .g  不说了,控制文字大小和加粗的。
.pa{position:absolute } 定义层为绝对位置,float元素定义 .pa 后float属性失效。既然是绝对层left、top属性是必不可少了不然失去了绝对层的意义,所以不要忘记设置left,top。绝对层上层一定记得要套相对层position:relative,不然,绝对层left、top属性参考的对象会是最外层的window,在body之外了,谁也不希望定义的元素跑到body外面去吧。在相对层内的绝对层可以随意定位,配合z-index属性几乎可以用html代码模拟photoshop画图了,^_^纯属玩笑。
.pr{position:relative}给left、top定值是相对于本来应该在的位置。一般与 .pa 配合使用。
.dl{display:inline}
.db{display:block}
.dn{display:none !important}
以上3个不想多说,重要,非常重要,实用,非常实用。<div class=”bd dn”></div>你只用敲两个字母,这一层就没了。
.in{float:left;display:inline;margin-left:4px;margin-top:4px;width:16px;height:10px;overflow:hidden;
background:url(http://i01.c.aliimg.com/images/cn/home/070214/new_l.gif) no-repeat}
“新”图标
.ih{float:left;display:inline;margin-left:4px;margin-top:4px;width:16px;height:10px;overflow:hidden;
background:url(http://i04.c.aliimg.com/images/cn/home/070214/hot_l.gif) no-repeat}
“热”图标
好用!不过要求前面元素float,记得配合margin属性调整位置。示例:
<div class="bd l23">
<div class="l">ddddddddddddddddddd</div><div class="ml7 mt5 in"></div>
<div class="c"></div>
</div>
.oh{overflow:hidden} 隐藏超出的内容
.tc{text-align:center} 文字居中
.bn{border:none !important} 消除border,有!important加权。
.b_1{border:1px solid #B8B8B8}
.bt_1{border-top:1px solid #ff7300}
.bt_2{border-top:1px dashed #CCC}
.bt_3{border-top:1px dashed #FFB980}
.bl_1{border-left:1px dashed #CCC}
.bg_1{background-color:#FFF1E6}
.bg_2{background-color:#F0F0F0}
.bg_3{background-color:#9ACD68}
Border和background系列就不说了
.o_1{opacity:.7;filter:alpha(opacity=70)}
.o_2{opacity:.9;filter:alpha(opacity=90)}
两个透明属性,给喜欢透明层的用。
.l17{line-height:17px;}
.l20{line-height:20px}
.l23{line-height:23px}
.l15p{line-height:150%}
这里需要强调,line-height是最常用的属性之一,出于兼容的考虑页面所有文字都应该具有line-height属性(这一属性可被子元素继承,所以不用担心浪费笔墨)。至于用px 还是用 % 建议用px,不同浏览器显示文字的高度是不一样的,用%只会放大这种差异,用px 才能消除差异。% 到底用不用的上呢?当然有用,不考虑高度差异的,象文章内容推荐用 % 当选用不同字号增大的比例是相同的。
这样,common部分就结束了。
e>     布局部分layout
.ma{margin-left:auto;margin-right:auto}
Div居中样式,这个属性可以让block块级元素自身居中,而不是里面的内容居中
.w778{width:778px;margin-left:auto;margin-right:auto}
.w952{width:952px;margin-left:auto;margin-right:auto}
2个布局用的样式,窄布局下用 .w778 宽布局下用 .w952 自定义布局用。
f>      列表ul li 专用样式
可以说这是重中之重了,主页级别的页面大部分的内容都是做在无序列表里面的,其庞大的使用规模,需要有完备的样式支持。
 
ul.lzb, ul.lzl {zoom:1} 这两个样式包括下面两个是zoom在ul里的应用
ul.lzb li{zoom:1;+margin-bottom:-4px} 针对ie下ul li 元素的margin-bottom:4px 的bug(bug出现条件:li 里有float 元素)使用了该样式的li其内可有浮左、浮右div,并且li内可兼容多行结构,这是样式ul.ll20 li无法实现的。(具体案例见xls 文档)
ul.lzl li{zoom:1;+margin-left:-16px} 这个样式的出现有些不得已,记得前面说过,为了避免ie6下的double margin bug,我们给所有的float元素额外加上了display;inline,这导致float属性的ul 在ie下出现意料之外的缩进问题,只能再增加这个样式来解决这一问题。
 
ul.ll20 li{line-height:20px;height:20px;+margin-bottom:-4px}
ul.ll23 li{line-height:23px;height:23px;+margin-bottom:-4px}
以上两个样式适用于固定高度的单行li,什么是单行li?指的是li中的文字无换行。
和height等值的line-height让 li中文字垂直居中。使用了这个样式的li其内可以有浮左、浮右div,是解决单行li兼容的比较好的方式。
 
ul.li20 li{background:url(http://i03.c.aliimg.com/images/cn/home/070215/d_ico.gif) 5px 7px no-repeat;
padding-left:15px}
ul.li23 li{background:url(http://i03.c.aliimg.com/images/cn/home/070215/d_ico.gif) 5px 10px no-repeat;
padding-left:15px}
这两个样式没什么好说的,分别针对li高度20px和23px的li背景样式,背景其实就是一个no repeat的方点。
 
ul.ll li{float:left;display:inline}
ul.lr li{float:right;display:inline}
想让一个个li象火车一样首位相接吗?用上面两个样式吧,让所有的li浮起来。
 
ul.ldl li{display:inline} 这个样式我不太喜欢,同样可以让li象火车一样首位相接,但是代价太大,所有的li都变成inline了,很多css样式对inline的元素无效,包括最基本的width、height、margin-top
 
ul.lbt li{border-top:1px dashed #CCC}
ul.lbl_1 li{border-left:1px solid #000}   
两个给li加边框的样式,给了li 更好的分隔效果。
 
这样,ul li 专用样式部分就结束了。
 
g>     样式margin control
.h1p{height:1%}
.h1{height:1px;overflow:hidden}
.h16{height:16px}
.h17{height:17px}
 
.m1{margin:1px}
.m7{margin:7px}
.m14{margin:14px}
.ml3{margin-left:3px}
.ml5{margin-left:5px}
.ml7{margin-left:7px}
.ml9{margin-left:9px}
.ml14{margin-left:14px}
.ml18{margin-left:18px}
.ml21{margin-left:21px}
.mr3{margin-left:3px}
.mr5{margin-left:5px}
.mr7{margin-right:7px}
.mr9{margin-right:9px}
.mr14{margin-right:14px}
.mr18{margin-right:18px}
.mr21{margin-right:21px}
.mt1{margin-top:1px}
.mt3{margin-top:3px}
.mt5{margin-top:5px}
.mt7{margin-top:7px}
.mt9{margin-top:9px}
.mt11{margin-top:11px}
.mt14{margin-top:14px}
.mt21{margin-top:21px}
.mt28{margin-top:27px}
.p7{padding:7px}
.p14{padding:14px}
.pt7{padding-top:7px}
.pt14{padding-top:14px}
 
以上所有样式都是用来留白的,height和margin的组合可以实现1px-31px 的垂直方向留白连续值(除了13这个不吉利数字),更多的情况我们会单独使用margin,注意margin能够使用的值。
最后的几个padding样式需要说明,记得我在前面说过用margin取代padding,这里不得不食言了,对于有3个border的碗状容器,即border-top;none的容器,对碗内的第一个子层使用margin-top似乎无法达到你的期望效果,那就对碗使用padding-top吧,本层的padding相当于子层的margin。
 
h>    组合样式
/* Vertical align Middle 垂直居中样式
ex:
<div class="vm"><div class="vma"><div class="vmb">
#content#
</div></div></div>
--please set the height attribute in addition before using it. height:100px for example. 使用前请重新设置.vm, .vmb{height:100px}里的height值。
*/
.vm, .vmb{height:100px}
.vm{position:relative}
.vma{position:absolute;border:none!important;top:0px;+top:50%;display:table}
.vmb{+position:relative;+top:-50%;display:table-cell;vertical-align:middle;+height:auto !important}
没什么要说的,要看效果请打开border
 
/* Picture Link 图片文字链组合
ex:
<a class="pl" href="#" ><img src="" /><div>#picture notation#</div></a><a class="pl" href="#" ><img src="" /><div>#picture notation#</div></a><div class="c"></div>
--don't forget <div class="c"></div> at the end for .pl has float attribute 不要忘了在最后加清除浮动层,因为 .pl 层有浮动属性。
*/
.pl{float:left;text-align:center;padding-bottom:4px;background:#fff;border:1px solid #ccc}
.pl img {display:block;margin:7px;border:1px solid #ccc}
html>/**/body .pl {margin-bottom:-1px}
@media all and (min-width: 0px){ .pl{margin-bottom:0px !important;} }
没什么好说的,试验下代码即可,实用的东西一般很简单。这里最后两行值得注意,倒数第二行firefox和opera可识别;最后一行只有opera能识别。
 
/* SHadow 块级元素阴影效果
ex:
<div class="sh r">  
<div class="sha" style="width:400px;height:600px;border:1px solid green">
        #content#
</div>    
<div class="shb"></div>      
<div class="shc"></div>      
</div>
--you should move the float attribute from .sha to .sh   类.sha上的float属性需要转移到类.sh上去
*/
.sh{position:relative;background:#ACACAC;}
.sh .sha{margin:0px 2px 2px 0px;background:#fff;}
.sh .shb{position:absolute;top:0px;right:0px;width:2px;height:2px;overflow:hidden;background:#fff;}
.sh .shc{position:absolute;bottom:0px;left:0px;width:2px;height:2px;overflow:hidden;background:#fff}
这个例子要说几句,没有阴影效果的一层,代码如下,可能有float属性,见class 里的 “r”
<div class="sha r" style="width:400px;height:600px;border:1px solid green">
        #content#
</div>
现在要给它加上阴影,我们需要在它外面再套一层,并且增加两个同级层。
<div class="sh r">  
<div class="sha" style="width:400px;height:600px;border:1px solid green">
        #content#
</div>    
<div class="shb"></div>      
<div class="shc"></div>      
</div>
同时,原来层的float属性要转移到新套的外层上。
 
/* TiTle 标题栏样式
ex:
<div class="tt">
<div class="ttl"></div>
<div class="ttc">title words</div>
<div class="ttr"></div>
</div>
*/
.tt{position:relative;height:37px;line-height:37px;background:url(http://i02.c.aliimg.com/images/cn/blog/home/070807/ttsty_tt_01.gif) repeat-x}
.ttc{float:left;display:inline;font-size:14px;font-weight:bold;}
.ttl{float:left;width:2px;height:100%;background:url(http://i02.c.aliimg.com/images/cn/blog/home/070807/ttsty_lt_01.gif) no-repeat}
.ttr{float:right;width:2px;height:100%;background:url(http://i02.c.aliimg.com/images/cn/blog/home/070807/ttsty_rt_01.gif) no-repeat}
需要说的是,这个样式不通用,因为不是所有的标题都是一个样子,这个标题样式是针对左中右结构的标题,可自适应宽度,如要更换背底需要重新设置以下样式
.tt{height:; line-height:; background:;}
.ttl{width:; background:;}
.ttr{width:; background:;}
所以说这个样式不通用,实际使用中几乎要把所有的样式重新写一遍。这里只是希望提供一个模型,也有便利之处吧。
网友咨询

   当前内容没有咨询! 马上发布咨询