[转载]如何写出兼容大部分浏览器的CSS 代码

转载如何写出兼容大部分浏览器的CSS 代码 – LoveJenny – 博客园.

前阵子一直在从事b/s 项目的开发,在css 方面有一些心得体会,特写来与大家分享,欢迎大家评论,不过请勿人身攻击啊,因为在前几年我也写过一篇文章:[原]兼容浏览器的布局CSS心得体会

楼下有很多人的评论:

image

image

image

就让我继续毁人吧。

 

1:使用Firefox 当主开发浏览器

为什么我推荐使用firefox 做为主开发浏览器,

首先目前市场上浏览器很多,ie6 + ,firefox ,opera,chrome,qq 浏览器,360浏览器,搜狗浏览器…

为什么我把qq 浏览器,360浏览器,搜狗浏览器 这些也算进去,是因为这些浏览器虽然使用ie的内核,但是在某些地方显示的效果不一样。

有很多人在开发的时候选择ie 做为浏览器,当然我认为如果使用ie 做为主开发浏览器的话,那应该是使用

ie8+ ,毕竟在ie8+ 的时候才出现了比较强大的工具,另外如果使用ie的话,那么你经常问自己的问题是“ie 下显示正常,为什么firefox 下显示不正常呢?”,这点后面会有解释。

 

回归正题:我推荐使用firefox 做为主开发浏览器的原因:

a:firefox 下面有开发神器firebug.

firebug 究竟有多厉害,相信使用过的人都知道的,另外firebug 还有yslow,等一系列测速插件,并且firebug启动速度也比较快。

b:firefox 有很多开发插件,虽然firebug已经很出色了,但是这些插件在某些地方还是很有用的。

c:firefox 是遵守css 标准的浏览器,众所周知ie 在这方面做的比较烂。

以前我曾经看过一篇文章,大致讲的是

“ie 下显示正常,为什么firefox 下显示不正常呢?”,

其实我感觉应该这样理解

“为什么firefox 下显示不正常,但是在ie下显示正常呢?”

因为当你这样问自己后,你自己就会去查找,究竟是哪些元素ie没有遵守css 标准呢。

d:firebug 虽然有控制台,但是有时候JavaScript 代码console.write(“something”);,并不会正常的显示到控制台上面去,

当你碰到console 失败的时候,请尝试下下面的步骤

1:启用firebug

image

2:禁用所有面板和清空激活列表。

image

3:重新启用firebug。

image

2:使用reset.css

使用reset.css 可以省掉很多事情,比如ul ,li 他们在很多浏览器下面的margin ,padding 都不一样,

通过使用reset.css 可以将大部分不一致的地方给屏蔽掉,没有理由不使用reset.css啊。

下面是我随便挑选的一个reset.css.

yui reset.css

3:学习一些基本的CSS 知识

如果想写好css 的话,那么一些基本的css知识是应该知道的,比如float,margin,padding,position..属性,还有盒子模型,文档流模型,在这里没什么技巧,我只能推荐一些书籍了。

精通CSS:高级Web标准解决方案(第2版)

一些基本的书籍随便看看,上面的这本书籍才是经典中的经典,个人认为学css不看这本书,看遍千本也枉然。

 

4:常见的bug

常见的一些bug你应该都知道的,事实上在我写css的这段时间,我发现大部分bug 都基本上是这些bug,大部分显示不正确的也是这些bug.

a:clearfix

在很多时候一刀切是非常管用的,尤其是对于那些非常喜欢用float的同学。

.clearfix:before, .clearfix:after { content:""; display:table; } .clearfix:after{ clear:both; overflow:hidden; } .clearfix{ *zoom:1; }

b:double margin (双倍边距)

有时候你会发现两个元素的margin 在不同的浏览器上显示不一样,如果你查看css 的时候发现你设置了float的话,那么很可能你碰到了double margin.  解决这个办法的原因很简单,比如设置margin 为0 (即不使用margin,我最早就是这种想法),

最根本的是设置float 元素的display = “inline”.

由于float 元素本来display 就是inline .所以每当你要使用float 的时候,请记住将display 设为inline.

 

c:关于width ,height,line-height,border

border 是一个很好用的东西,在很多时候,仅仅给元素加个border就解决实际问题了,因为加了border的元素在ie 下面就有了hasLayout 属性。

line-height 也是一个非常让人头痛的属性,有时候你会发现无论你怎么设置height,height 好像不起作用似的,height不起作用有可能是display :line ,也有可能float,同样也有可能是line-height。

有人说过只要是float 的对象就应该设置width,height,关于这点我认为在某些情况下设置width 是必要的,但是设置height 就不一定了。

d:bug 其实没有那么多

有很多些css 的同学,当碰到一两个比较棘手的问题的时候,就说这个是ie的bug,可是大部分情况下,是自己的写法没有符合标准,或者是没有正确的理解css,所以他 们经常做的就是,试试加个width,加个height。试试加个border,试试修改下margin,padding。 当然很多时候运气比较好,一下就加对了,但运气不好的时候就比较郁闷了。解决了bug 是运气,没解决bug就是ie的bug,可是事实上ie 的bug 大部分都曾经出现过,所以在对待bug 的时候,还是要心平气和的分析问题,解决问题。

 

5:应该记住的一些浏览器css写法

如果你使用firefox 做为主开发浏览器的话,我相信你的页面在opera,chrome 下应该也不会太乱,但是ie 我就不敢保证了,这个时候就应该调整ie 兼容性了。

有很多种方式,比如使用条件注释针对各个ie 浏览器引入不同的css。

<!--[if IE 5]>仅IE5.5可见<![endif]--> <!--[if gt IE 5.5]>仅IE 5.5以上可见<![endif]--> <!--[if lt IE 5.5]>仅IE 5.5以下可见<![endif]--> <!--[if gte IE 5.5]>IE 5.5及以上可见<![endif]--> <!--[if lte IE 5.5]>IE 5.5及以下可见<![endif]--> <!--[if !IE 5.5]>非IE 5.5的IE可见<![endif]>

 

我个人比较喜欢的一种方式还是使用css hacker.

我是从ie8,ie7,ie6,逐渐的调的,因为越到后面需要调的东西越多,而通过这种方式来调的话,我的css 代码改动是比较小的,即所谓的小步前进吧。

首先找出是哪个元素引起布局混乱,然后看看是不是属于哪些常见的bug,接着给这个元素设定一个

border.

通过慢慢的查找,相信除了ie6 ,布局应该都是ok的。但是ie6应该怎么做呢?

image

我比较喜欢的是 “_”

image

参考自:http://zhidao.baidu.com/question/329196001.html

6 :金子般的table

有很多人都不喜欢table,所以才有了div without table. 对于这些人来说table是不需要的,div 是神。

我以前写过一篇文章:你也可以的,Div Without Table

早这篇文章中,我使用div来布局,虽然题目叫做Div Without Table ,但是我并不是想表达Table 是没用的,Table 是应该被Without 的,我始终坚信一个原则“div 布局,table 展示数据”。

为什么table 是金子呢?

首先table 是一个很早就出现的元素,而且由于table 比较简单,所以各个浏览器对table 的渲染 大部分都是一致的,所以使用table你很容易实现一些功能。

a:居中显示

在有些时候居中显示会让你比较郁闷,你会感觉到table 的好用和舒服。

b:n行n列

对于几行几列的这种布局,不要怀疑,不要犹豫,使用table吧。

c:某些让你改bug 很郁闷的地方。

有时候你会发现你调来调去总是调不好,如果这个bug 引入table 的代价比较小的话,个人也推荐使用table。

 

传说div 比table 渲染的要快,因为table 必须得等到</table> ,table 中的元素才会被渲染出来,我没有测试过,不知道是不是这样。

 

7:使用一些CSS 框架

如果你的页面可以使用一些CSS框架的话,那就尝试使用一款CSS框架吧,960grid, blueprint 应该都还算可以。

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏