1px 的兼容《出自波波手笔》
写本书的出发点是:希望给大家一套比较容易接受的、好用的、能处理页面大部分内容的CSS全局样式,当然使用这套CSS是在本人提出的一套HTML架构之下的。说架构其实有点故弄玄虚,只是想和大家分享前端HTML编码的一点点思路,和一个个在此思路之下解决问题的方法。所有遇到的问题全部来源于日常工作,所有代码无拷贝他人,均属原创,仅供业内人事探讨,不提供教学。
思路要点之一:绝不考虑使用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的兼容。
所提供样式可以分为以下几类:
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。
b> link 部分,可以修改或增加你喜欢的链接样式。
注意.lk_l a{text-decoration:underline !important} 和 .lk_n a{text-decoration:none !important}的使用
c> for testing 故名思意,当你需要做测试时,可以用到的,例如,你想看到一个div的边框只需要往class里敲入两个字母 ‘bd’
.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的推荐。