前言罗唆(其实很多时候没有区别,只是我们没弄好就变成区别了)
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:xxxx}的方式方便的整理出你要hack的地方,而统一Hack。尝试一下吧,再也不要乱嵌套了,虽然在Div+CSS的方式下你几乎可以想怎么嵌套就怎么嵌套,但是按照上面的规律你将轻松很多,从而事半功倍!
作者:xddxz
链接:http://www.keephelp.com/css/css-ie-firefox-divcss-1/
欢迎随意转载。