IE6、IE7、FF 与兼容性有关的特性[转载]
IE6、IE7、FF 与兼容性有关的特性
CSS HACK
代码:
所有浏览器 通用
二、万能 float 闭合(非常重要!) 可以用这个解决多个div对齐时的间距不对,
关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]
将以下代码加入Global CSS 中,给需要闭合的div加上 class=”clearfix” 即可,屡试不爽.
代码:
}/* */
IE5/MAC的过滤器,一般用不着
/**//*/
@import "ie5mac.css";
/**/
下面是IE的条件注释,个人觉得用条件注释调用相应 Hack是比较完美的多浏览器兼容的解决办法。把需要hack的地方单独放到一个文件里面,当浏览器版本符合的时候就可以调用那个被Hack的样式,这样不仅使用起来非常方便,而且对于制作这个CSS本身来讲,可以更严格的观察到是否有必要使用hack,很多情况下,当我本人写CSS如果把全部代码包括Hack都写到一个CSS文件的时候的时候会很随意,想怎么Hack就怎么Hack,而你独立出来写的时候,你就会不自觉的考虑是否有必要Hack,是先Hack CSS?还是先把主CSS里面的东西调整到尽可能的不需要Hack?当你仅用很少的Hack就让很多浏览器很乖很听话的时候,你是不是很有成就感呢?你知道怎么选择了吧~~呵呵
IE的if条件Hack 自己可以灵活使用参看这篇IE条件注释
Only IE
所有的IE可识别
只有IE5.0可以识别
Only IE 5.0+
IE5.0包换IE5.5都可以识别
仅IE6可识别
Only IE 7/-
IE6以及IE6以下的IE5.x都可识别
Only IE 7/-
仅IE7可识别
Css 当中有许多的东西不不按照某些规律来的话,会让你很心烦,虽然你可以通过很多的hack,很多的!important 来控制它,但是你会发现长此以往你会很不甘心,看看许多优秀的网站,他们的CSS让IE6,Ie7,Firefox,甚至Safari,Opera运行起来完美无缺是不是很羡慕?而他们看似复杂的模版下面使用的Hack 少得可怜。其实你要知道IE 和 Firefox 并不不是那么的不和谐,我们找到一定的方法,是完全可以让他们和谐共处的。不要你认为发现了hack的办法,你就掌握了一切,我们并不是Hack的奴隶。
div ul li 的嵌套顺序
今天只讲一个规则。就是<div><ul><li>的三角关系。我的经验就是<div>在最外面,里面是<ul>,然后再是<li>,当然<li>里面又可以嵌套<div>什么的,但是并不建议你嵌套很多东西。当你符合这样的规则的时候,那些倒霉的,不听话的间隙就不会在里面出现了,当你仅仅是<div>里面放<li>,而不用<ul>的时候,你会发现你的间隙十分难控制,一般情况下,IE6和IE7会凭空多一些间距。但很多情况你来到下一行,间隙就没了,但是前面的内容又空了很大一块,出现这种情况虽然你可以改变IE的Margin,然后调整Firefox下面的Padding,以便使得两者显示起来得效果很相似,但是你得CSS将变得臭长无比,你不得不多考虑更多可能出现这种问题补救措施,虽然你知道千篇一律来Hack它们,但是你会烦得要命。
具体嵌套写法
遵循上面得嵌套方式,
<div><ul><li></li></ul></div>
然后在CSS 里面告诉
ul {Margin:0px;Padding:0px;list-style:none;},
其中list-style:none是不让<li>标记的最前方显示圆点或者数字等目录类型的标记,因为IE和Firefox显示出来默认效果有些不一样。因此这样不需要做任何手脚,你的IE6、和IE7、Firefox显示出来的东西(外距,间距,高度,宽度)就几乎没什么区别了,也许细心的你会在某一个时刻发现一、两个象素的差别,但那已经很完美了,不需要你通过调整大片的CSS来控制它们的显示了,你愿意,你可以仅仅hack一两个地方,而且通常这种hack可以适应各种地方,不需要你重复在不同的地方调试不同的Hack方式–减轻你的烦恼。你可以ul.class1, ul.class2, ul.class3 {xxx xxx}的方式方便的整理出你要hack的地方,而统一Hack。尝试一下吧,再也不要乱嵌套了,虽然在Div+CSS的方式下你几乎可以想怎么嵌套就怎么嵌套,但是按照上面的规律你将轻松很多,从而事半功倍!
本站文章均为原创,转载请注明出处!
本文地址:http://www.zhjie.net/ie6-ie7-ff-compatibility-related-attributes.htm