ie6 IE7 IE8 多浏览器css写法 (三)

2014-11-24 09:18:26 · 作者: · 浏览: 1

盒模型解决方法

selct {width:IE5.x宽度; voice-family :""}""; voice-family:inherit; width:正确宽度;}

盒模型的清除方法不是通过!important来处理的。这点要明确。

清除浮动

select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}

在Firefox中,当子级都为浮动时,那么父级的高度就无法完全的包住整个 子级,那么这时用这个清除浮动的兼容来对父级做一次定义,那么就可以解决这个问题 。

截字省略号

select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrapoverflow:hidden; }

这个是在越出长度后会自行的截掉多出部分的文字,并以省略号结 尾,很好的一个技术。只是目前Firefox并不支持。

只有Opera识别

@media all and (min-width: 0px){ select {……} }

针对 Opera浏览器做单独的设定。

以上都是写CSS中的一些兼容,建议遵循正确的标签嵌套(div ul li 嵌套结构关系),这样可以减少你使用兼容的频率,不要进入理解误区,并不是一个页面就需要很多的兼容来保持多浏览器兼容),很多情况下也许一个兼容都不用 也可以让浏览器工作得非常好,这些都是用来解决局部的兼容性问题,如果希望把兼容性的内容也分离出来,不妨试一下下面的几种过滤器。这些过滤器有的是写在 CSS中通过过滤器导入特别的样式,也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。

IE5.x的过滤器,只有IE5.x可见

@media tty {

i{content:"";/*" "*/}} @import ’ie5win.css’; /*";}

}/* */

IE5/MAC的过滤器,一般用不着

/**//*/

@import "ie5mac.css";

/**/

下面是IE的条件注释,个人觉得用条件注释调用相应 兼容是比较完美的多浏览器兼容的解决办法。把需要兼容的地方单独放到一个文件里面,当浏览器版本符合的时候就可以调用那个被兼容的样式,这样不仅使用起来 非常方便,而且对于制作这个CSS本身来讲,可以更严格的观察到是否有必要使用兼容,很多情况下,当我本人写CSS如果把全部代码包括兼容都写到一个 CSS文件的时候的时候会很随意,想怎么兼容就怎么兼容,而你独立出来写的时候,你就会不自觉的考虑是否有必要兼容,是先兼容 CSS?还是先把主CSS里面的东西调整到尽可能的不需要兼容?当你仅用很少的兼容就让很多浏览器很乖很听话的时候,你是不是很有成就感呢?你知道怎么选 择了吧~~呵呵

IE的if条件兼容 自己可以灵活使用参看这篇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 当中有许多的东西不不按照某些规律来的话,会让你很心烦,虽然你可以通过很多的兼容,很多的!important 来控制它,但是你会发现长此以往你会很不甘心,看看许多优秀的网站,他们的CSS让IE6,Ie7,Firefox,甚至Safari,Opera运行起 来完美无缺是不是很羡慕?而他们看似复杂的模版下面使用的兼容 少得可怜。其实你要知道IE 和 Firefox 并不不是那么的不和谐,我们找到一定的方法,是完全可以让他们和谐共处的。不要你认为发现了兼容的办法,你就掌握了一切,我们并不是兼容的奴隶。

div ul li 的嵌套顺序

今天只讲一个规则。就是div ul li 的三角关系。我的经验就是 div 在最外 面,里面是 ul ,然后再是 li ,当然 li 里面又可以嵌套 div 什么的,但是并不建议你嵌套很多东西。当你符合这样的规则的时候,那些倒霉的,不听话的间隙就不会在里面出现了,当你仅仅是 div 里面放 li , 而不用 ul 的时候,你会发现你的间隙十分难控制,一般情况下,IE6和IE7会凭空多一些间距。但很多情况你来到下一行,间隙就没了,但 是前面的内容又空了很大一块,出现这种情况虽然你可以改变IE的Margin,然后调整Firefox下面的Padding,以便使得两者显示起来得效果 很相似,但是你得CSS将变得臭长无比,你不得不多考虑更多可能出现这种问题补救措施,虽然你知道千篇一律来兼容它们,但是你会烦得要命。

具体嵌套写法

遵循上面得嵌套方式, div ul li 然后在CSS 里面告诉 ul {Margin:0px;Padding:0px;list-style:none;},其中list-style:none是不让 li 标记的最前方显示圆点或者数字等目录类型的标记,因为IE和Firefox显示出来默认效果有些不一样。因此这样不需要做任何手脚,你的IE6、和 IE7、Firefox显示出来的东西(外距,间距,高度,宽度)就几乎没什么区别了,也许细心的你会在某一个时刻发现一、两个象素的差别,但那已经很完 美了,不需要你通过调整大片的CSS来控制它们的显示了,你愿意,你可以仅仅兼容一两个地方,而且通常这种兼容可以适应各种地方,不需要你重复在不同的地 方调试不同的兼容方式–减轻你的烦。你可以ul.class1, ul.class2, ul.class3 {xxx:xxxx}的方式方便的整理出你要兼容的地方,而统一兼容。尝试一下吧,再也不要乱嵌套了,虽然在Div+CSS的方式下你几乎可以想怎么嵌套 就怎么嵌套,但是按照上面的规律你将轻松很多,从而事半功倍!

终极解决方案

一、if浏览器识别


二、减少ie兼容量

或者

万恶的ie!