正在加载...

结合JavaScript,进行进一步补充、整理。

Updated@2007/3/11 CSS 常见注意事项: http://www.awflasher.com/blog/archives/638 - 转载请保留链接,随时可能修改!

同时兼容IE、FF的基本注意事项:

  1. float的div一定要闭合。例如:(其中floatA、floatB的属性已经设置为float:left;)

    这里的NOTfloatC并不希望继续平移,而是希望往下排。这段代码在IE中毫无问题,问题出在FF。原因是NOTfloatC并非float标签,必须将float标签闭合。在 <div id="floatB"></div> <div id="NOTfloatC"></div> 之间加上<div class="clear"></div> aw提醒您:这个div一定要注意声明位置,一定要放在最恰当的地方,而且必须与两个具有float属性的div同级,之间不能存在嵌套关系,否则会产生异常。并且将clear这种样式定义为为如下即可:

    此外,为了让高度能自动适应,要在wrapper里面加上overflow:hidden; 当包含float的box的时候,高度自动适应在IE下无效,这时候应该触发IE的layout私有属性(万恶的IE啊!)用zoom:1;可以做到,这样就达到了兼容。例如我的某一个wrapper如下定义:

    onhavinglayout-绝对不得错过,每一个制作CSS以及用脚本操作DOM的人都不得错过!

  2. margin加倍的问题。设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline; 例如: <div id="IamFloat"></div> 相应的css为

  3. 关于容器的包涵关系很多时候,尤其是容器内有平行布局,例如两、三个float的div时,宽度很容易出现问题。在IE中,外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。
  4. 关于高度的问题如果是动态地添加内容,高度最好不要定义。浏览器可以自动伸缩,然而如果是静态的内容,高度最好定好。(似乎有时候不会自动往下撑开,不知道具体怎么回事)
  5. 最狠的手段 - !important; 如果实在没有办法解决一些细节问题,可以用这个方法.FF对于"!important"会自动优先解析,然而IE则会忽略.如下

    值得注意的是,一定要将 xxxx !important 这句放置在另一句之上,具体原因很简单,就不说了:)

补充:当时发表这篇文章时,并没有IE7的出现,而且那个时候我也没有很多地考虑JavaScript。这次更新一些。

一、IE6的border。会自动往外加margin。当第一个box和第二个box之间的margin为a时,如果两个box都没有border,那么IE6、IE7、FF下面都没问题。当有border时,FF和IE7的border不会占用它们之间的“空位”,而IE6这个老喜欢“自作聪明”的家伙就把margin给撑开了。我并没有调试是否padding也会有这个副作用,我个人怀疑也有,但是既然把问题分析道这一步了,就不赘述了。解决方案就是判断是否是IE6,然后动态的修补margin。其间涉及到js获取浏览器版本、样式值这些技术。参阅 http://www.awflasher.com/blog/archives/791

二、对于块元素,在IE6下面最好制定宽度才可float起来,尤其是a标签。

三、在IE下,如果采用了list-style-position:inside,那么可能会造成li元素强行往前缩进。 资源网站:

还没找到您要的东西?Google试试看吧,
Google更注重原创、时效性好的文章:



本文相关评论: 才 39 条评论
( 展开所有评论 | 收起所有评论 ) 立刻发表评论 »
sesa 2006-08-24 14:57:04

噢,god~看不懂是什么东东,我好白哦~

黑羽 2006-08-24 16:34:26

好东东。收藏了

我在设计我的Blog时就碰到了不少IE和FF不兼容的地方。

突出的还有对字体行高和粗细的不同。这个好像还没有什么好的解决办法。sigh…

aw 2006-08-24 16:40:38

黑羽兄……我这玩意还有很多都是知其然不知其所以然的:(

5key 2006-08-24 18:02:49

清楚浮动元素想必应该算是布局中一个不大不小的问题。刚开始的时候也因为这个抓狂过。。。

平常如果处理浮动的不多,就把clear:both;写到NOTfloatC里去了。

顺便来宣传下自己弄的css menu的插件。。呵呵。。
http://www.5key.net/blog/article.asp?id=190

aw 2006-08-24 18:21:09

也有人说这样单独clear不好,但是我觉得这样比较舒服……呵呵。
你这家伙,唉!我现在一个人要同时开发Flash和XHTML……累死了

道雪儿 2006-08-24 22:02:10

这些适应方法,恐怕没有我见过的一个男生的 用SCRIPT写的 自适应程序高~他还没有大学毕业。

hugo 2008-06-11 15:31:18

MJPCLAB.NET 里面是些什么B 破玩意。看他的软件作品就知道,五子棋,魔方…汗一个,确实是大学没毕业的作品。
什么JS写的自适应程序,没事不懂别TMD的一派胡言,还捧的像个神… 棍似的…
不要说我嘴巴毒,事实就是这样。

aw 2008-06-11 15:43:47

….那叫时尚js写法。。。恩。。。。其实我都是很土的写法:(

aw 2006-08-24 22:07:31
引用自 道雪儿
这些适应方法,恐怕没有我见过的一个男生的 用SCRIPT写的 自适应程序高~他还没有大学毕业。

呵呵,牛啊~

sonic0828 2006-08-24 23:12:14

久没来看你,最近你也在搞这个呀~~~

Clear 2006-08-25 08:59:39

display:inline将不能通过W3C CSS Check.
尽量避免出现各个浏览器不兼容的位置是最好的选择.

aw 2006-08-25 09:42:22
引用自 Clear
display:inline将不能通过W3C CSS Check.
尽量避免出现各个浏览器不兼容的位置是最好的选择.

可是目前这是最佳的解决方案,而且我本来就没有打算通过W3C验证

5key 2006-08-25 09:50:20

说的js自适应高度就是这个吧。。

http://www.5key.net/blog/article.asp?id=123

通过获取滚动的高度来设置其高度。

Clear 2006-08-25 10:10:12

要提高自己的标准啊,这样才会有更大的进步.

aw 2006-08-25 11:01:02
引用自 Clear
要提高自己的标准啊,这样才会有更大的进步.

恩,我明白,问题仍然是工程质量与交付时间的冲突

道雪儿 2006-08-25 12:19:53
引用自 5key
说的js自适应高度就是这个吧。。
http://www.5key.net/blog/article.asp?id=123
通过获取滚动的高度来设置其高度。

不是这个哦。我说的这个男生写的 SCRIPT自适应程序很全面的哦。
他的那个程序我这个外行看了一下,应该是要求网页自适应:1、各种视窗系统:Linux、Windows 2000、Windows (Longhorn)……等等等!2、自适应各种浏览器:NetScape、Mozilla Firefox、Safari……等等等~!
呵呵,还不错是吧,道取的眼光不错滴,西西。西。

道雪儿 2006-08-25 12:22:30
引用自 aw
引用
道雪儿
这些适应方法,恐怕没有我见过的一个男生的 用SCRIPT写的 自适应程序高~他还没有大学毕业。
呵呵,牛啊~

很牛,他现在上海呀。我真的有时很想将他推荐介绍给YEEOH团队的小牛牛们认识……

aw 2006-08-25 13:19:42
引用自 道雪儿
引用
aw
引用
道雪儿
这些适应方法,恐怕没有我见过的一个男生的 用SCRIPT写的 自适应程序高~他还没有大学毕业。
呵呵,牛啊~
很牛,他现在上海呀。我真的有时很想将他推荐介绍给YEEOH团队的小牛牛们认识……

把程序拿出来看看。

5key 2006-08-25 13:35:40

确实牛,我也等看看。

小萝卜头 2006-08-25 19:44:38

自适应所有分辨率所有浏览器?!
用JSCRIPT写?居然不用CSS HACK。。。。残念。。。。
弱弱的认为那是很原始的通过判断不同浏览器不同分辨率载入不同样式表的Solution……..
可是很多情况下是不推荐用,或者要求不用Script解决的说。。。
再说浏览器不同版本渲染的方式都是不同的说。。。难道此人神人,已经找出所有缺陷?
刚用上IE7RC1,很爽,貌似解决了不少标准性问题~~OPERA可以暂时不用鸟~
可恨的第二届青少年网页设计大赛!可恨他们居然用IE6作评判平台!

道雪儿 2006-08-26 22:10:52
引用自 小萝卜头
弱弱的认为那是很原始的通过判断不同浏览器不同分辨率 载入不同样式表的Solution……..

肯定没有这么蠢咯~!!!
等我问一下他先,这个人很喜欢写代码,很难影响他说多几句废话的。要很谦虚的问才行,头大哦。
等我忙完手上的事情后,再跟他死皮赖脸问吧,(当然也不能这样说,)哈哈~!!!

aw 2006-08-26 22:19:31
引用自 道雪儿
等我问一下他先,这个人很喜欢写代码,很难影响他说多几句废话的。

我还是喜欢普通一点儿的人

Clear 2006-08-27 01:15:47

在AW的大力帮助下,我最后来到了上海,然后马上还有一名成员也要来上海。目前武汉还留有2名成员。看来要开始考虑分散开发的管理流程了。

simx 2006-08-29 11:40:34

习惯还是写

*{margin:0; padding:0;}

几乎important!针对ff及opera也比较少

realdodo 2006-08-30 15:25:59

学习!不同浏览器的CSS问题真是让人头疼!

道雪儿 2006-09-04 21:28:12

我问那个男生了,不过结果可能让你失望。他对我说呢:‘CSS+DIV对引擎搜索有利’——一派胡言。
他是搞软件的,并且也写了不少小游戏,应该很好玩的……

aw 2006-09-04 21:31:42
引用自 道雪儿
我问那个男生了,不过结果可能让你失望。他对我说呢:‘CSS+DIV对引擎搜索有利’——一派胡言。
他是搞软件的,并且也写了不少小游戏,应该很好玩的……

呵呵,让他有空写点教程我学习学习.

道雪儿 2006-09-11 14:13:47
引用自 aw
呵呵,让他有空写点教程我学习学习.

恩,我不会叫但是可以等等看他自己写吧,也许等10年后……他连BLOG都不写,只见他在QQ写过关于如何在他设计的本本上使用双数据库。

aw 2006-09-11 14:24:20
引用自 道雪儿
恩,我不会叫但是可以等等看他自己写吧,也许等10年后……他连BLOG都不写,只见他在QQ写过关于如何在他设计的本本上使用双数据库。

那就请他暂时收回“一派胡言”四个字。

道雪儿 2006-09-12 10:11:56
引用自 aw
那就请他暂时收回“一派胡言”四个字。

我又没有和他说到 你或者谁的话~!我只是问他 “据说CSS+DIV对引擎搜索有利,是不是。”
算了,告诉你他的网站: MJPCLAB。NET
但是最后我引用了你以前文章的一段话(没有说作者是谁),他再没有出声,他其实非常非常的沉默。但是我觉得人老实也不错,又想到一边去了,哈哈,停止。

aw 2006-09-12 10:19:20
引用自 道雪儿
他再没有出声,他其实非常非常的沉默。

那就是说“一派胡言”不是他说的?
我觉得既然你说我的观点是一派胡言,那最好给出证据,让我服你。
如果是我错了,我不会计较面子或是什么,我甚至会专门发一篇日志来弥补过失。
还有,讨论问题是否低调,跟人是否老实,我觉得关系不大吧。
我讨论问题有时候还真是低调不下来,但你要说我这人不老实,嘿嘿,你问问我的同事和朋友吧。

道雪儿 2006-09-12 10:25:31
引用自 aw
那就是说“一派胡言”不是他说的?
我觉得既然你说我的观点是一派胡言,那最好给出证据,让我服你。
……我讨论问题有时候还真是低调不下来,但你要说我这人不老实,嘿嘿,你问问我的同事和朋友吧。

是他说的啊,但是他只是说网上的这种观点他现在不赞同。我从始至终没有跟他提到任何人、任何作者的名字(包括AW),只是论到这种观点。你不要激动嘛,也许他现在没有意识到,下次有机会再笑话这个小朋友一下,呵。

道雪儿 2006-09-12 10:43:43

我还可以告诉你,去年我和他讨论他的本本设计的时候,我给他看你设计的一个FLASH版的波形设计,他很佩服,说 你(AW)的确很厉害。
要是被他知道我多余在这里给他惹事,他可能不高兴……

aw 2006-09-12 10:46:16
引用自 道雪儿
我还可以告诉你,去年我和他讨论他的本本设计的时候,我给他看你设计的一个FLASH版的波形设计,他很佩服,说 你(AW)的确很厉害。
要是被他知道我多余在这里给他惹事,他可能不高兴……

不是惹事~不是惹事。我只是有一种打破沙锅问到底的习惯而已。
那个波形设计是Flash+VC+汇编而已,我的毕业设计比那个应该更厉害一些,呵呵……不是归根结底还是Macromedia厉害。

小白 2007-03-07 13:38:57

好有好多的兼容技巧,比如在自适应这块就很多。还有最小高度等等问题!
————我也是电子信息工程专业 QQ 277211914

talency 2007-04-06 16:44:47

我是电子工业出版社博文视点的编辑蔡勇,我们正在为一下这本书寻找合适的译者,希望我们有合作的机会!我的E-mail/MSN:talency82@broadview.com.cn

Pro CSS Techniques

http://www.amazon.com/Pro-CSS-Techniques-Jeff-Croft/dp/159059732X/ref=pd_bbs_sr_1/105-8028574-9368408?ie=UTF8&s=books&qid=1173685382&sr=8-1

公司简介
北京博文视点资讯有限公司由信息产业部直属的中央一级科技与教育出版社——电子工业出版社(PHEI)与国内最大的IT技术网站CSDN.NET和最具专业水准的IT杂志社《程序员》合资成立,主要出版面向IT应用开发人员的专业书籍。

呆兔 2007-06-15 09:57:11

路过不留言,不大礼貌,谢谢你发表的日志.

FF,IE兼容问题–cssbeta.com 2007-09-21 22:08:19

[...] 相关内容:个人整理的FF、IE的最基本的CSS兼容技巧 IE与Firefox的CSS兼容大全 [...]

[支持Ctrl+Enter]
声明:
1、本站仅与见过面的个人博客交换链接,见此文
2、留言时的头像是Gravatar提供的服务。如果您有兴趣并且有闲暇时间,可以看看这里的介绍
3、aw's blog入选了新浪科技评选的《年度最佳个人博客》提名,喜欢这个博客的朋友们如果有空,去这里帮我投个票吧^_^