CSS学习研究

 

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的推荐。