浏览器CSS兼容

一、《important 在IE6及FF中的使用》
.box1 {width:150px !important;}

.box1 {width:250px;}

!important是说这个设置有优先级,IE碰到!important不会出错只是忽略他的功能,假如后面又设置了width,IE会以最后设置的 width为准,假如后面再没有其它设置,则会用当前这个值,也就是前面的!important那个值。比如:#test {width: 300px !important }IE与FF都显示300PX。假如后面还有值IE就显示后面的值,FF显示前面有!import的那个值!

而其它浏览器,则认这个important,因为有优先级的关系,所以始终以前面设置的 width为准。

#test {width:300px;width:400px !important ;}

这句显示的结果是IE和FF宽度都是 400PX

#test {width:300px !important ;width:400px;}

这句显示结果FF:300px IE: 400px

所以,使用!important 时,把含有!important 放到前面。

但是问题又来了,IE7已可以识别!important,请看下面!

二、针对firefox ie6 ie7的css样式

现在大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,但是ie7对!important可以正确解释,会导致页面没按要求显示!找到一个针对IE7不错的hack方式就是使用“* html”,现在用IE7浏览一下,应该没有问题了。

现在写一个CSS可以这样:

#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
* html #1 { color: #999; } /* IE7 */

那么在firefox下字体颜色显示为#333,IE6下字体颜色显示为#666,IE7下字体颜色显示为#999可以用” ”来实现只有IE识别的CSS Hack可能有朋友想到用”_” Hack,但它们是由区别的,因为IE7中是不识别“_”的。所以用

测试结果:

IE5.5,IE6 ,IE7浏览器都能识别;

FF2.0,Opera 9,Safari 2浏览器不识别。

三、IE7的hack

IE7 修复了很多 bug,也增加了对一些选择符的支持,所以现在诸如 *html {} 和 html>body {} 、!important等针对 IE 隐藏或显示的 hack 都会在 IE7 中失效。虽然 CSS Hack 不推荐使用,条件注释才是万无一失的过滤器,但是条件注释只能出现在 HTML 中,CSS Hack 还是有用武之地的。Nanobot 发现了一些针对 IE7 的 CSS Hack,具体就是:

>body
html*
* html

这三种写法,其中前两种都是不合法的 CSS 写法,在标准兼容浏览器中被被忽略,但是 IE7 却不这么认为。对于 >body ,它会将缺失的选择符用全局选择符 * 代替,也就是将其处理成了 *>body,而且不光对于 > 选择符, ,~ 选择符中这个现象也存在。对于 html* ,由于 html 和 * 之间没有空格,所以也是一种 CSS 语法错误,但 IE7 不会忽略,而是错误地认为这里有一个空格。对于第三种 * html,IE7 认为 html 前面的 DTD 声明也是一个元素,所以 html 会被选中,这三种方法中只有这一种方法是合法的 CSS 写法,也就是说可以通过校验器的验证,因此也是作者推荐的 hack 用法。

IE 6 and below
Use * html {} to select the html element.
IE 7 and below
Use * html, * html {} to select the html element.
IE 7 only
Use * html {} to select the html element.
IE 7 and modern browsers only
Use html>body {} to select the body element.
Modern browsers only (not IE 7)
Use html>/**/body {} to select the body element.

四、IE和FF对盒模型的解释也不一样,代码说明:#test { width: 650px !important;width: 648px;padding-left:2px;background:#fff; }
test 显示的宽带是 650px

IE Box的总宽度是: width padding border margin宽度总和FF Box的总宽度就是 width的宽度,padding border margin的宽度在含在width内。

假如有BOX{WIDTH:"300"; PADDING:"5PX";},则BOX在IE的宽度应该为:310。而在FF的宽度则是300,所以在BOX有填充的情况下应该这样使用BOX{WIDTH:"290"!IMPORTANT; WIDTH: "300";},这样子才能确保BOX的宽度始终在300px,而不会出现被撑开的现象,而在FF里面则不会造成浮动层填不满的情况。

五、ul 标签在 Mozilla 中有 padding 值的,而在 IE 中只有 margin 有值。

设置ul{margin:0;padding:0}

六、IE 分不清继续关系和父子关系的差别,全部都是继续关系

七、FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)

八、居中问题

1、垂直居中.将 line-height 设置为当前div相同的高度, 再通过 vertical-align: middle.( 注重内容不要换行.)

2、水平居中. margin: 0 auto;(当然不是万能)

3、若需给 a 标签内内容加上样式, 需要设置 display: block;(常见于导航标签)

4、FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.\\

5、UL的不同表现:

ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)

6、作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应。

九、关于手形光标hand 只适用于 IE..IE与FF都认的话请用 cursor: pointer

时间: 2024-11-04 03:55:20

浏览器CSS兼容的相关文章

【转载】各浏览器CSS兼容问题

CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并 整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名. CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容

各浏览器CSS兼容问题

CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并 整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名. CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容

浏览器CSS兼容问题汇总及解决

由于公司项目要求兼容到IE6,这之中遇到不少CSS兼容性问题,所以就在博客汇总下来,以后在项目中遇到新的兼容性问题,也会在这里更新. 1.IE6下height属性会失效 问题描述:在IE6下,即使块级元素设置了高度,但若元素内部的内容超出设置高度,内部内容会把该块级元素高度撑开,height失效. 解决方法:对该块级元素设置overflow:hidden; 2.div存在最小高度 问题描述:在IE6下,块级元素会存在大概是13px默认最小高度,即使是空的div标签或者height属性设置比13p

CSS兼容各浏览器的hack

CSS兼容各浏览器的hack:建议:尽可能的手写代码,可以有效的提高学习效率和深度.浏览器的种类多,麻烦自然也多,主要是各种浏览器对某些属性的渲染效果并不相同,所以有时候需要专门针对特定浏览器或者特定版本书写CSS代码,这样就需要用到所谓的“CSS Hack”,下面以一段实例的形式介绍一下个浏览器hack. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content

纯css兼容个浏览器input[type=&#39;radio&#39;]不能自定义样式

各个浏览器对于表单input[type='radio'].input[type='checkbox']的样式总是各有差异 //html <div class="remember-account"> <input type="checkbox"> <span>记住账号</span> </div> //css .remember-account { display: inline-block; font-siz

转:【总结】浏览器CSS Hacks汇总,浏览器兼容方式CSS Hacks

[总结]浏览器CSS Hacks汇总 浏览器兼容可以说是前端开发所要面对的第一个挑战,目前我的电脑上已经安装了6种浏览器(基于IE内核的不算,如Maxthon等). CSS hacks利用浏览器的漏洞来隐藏特定浏览器的CSS规则.实现浏览器兼容主要有两种方式条件样式表和CSS Hacks(Selector Hacks.Attribute Hacks).对此根据一些资料汇总了一些CSS Hacks方法.   1.条件样式表 像这样的代码你应该见过: <link rel="stylesheet

div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法(非原创)

div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法 1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 4.FF: 设置 padding 后, div 会增加 height 和 wi

{转}div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法

div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法 1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 4.FF: 设置 padding 后, div 会增加 height 和 wi

纯CSS实现:垂直居中,未知宽高,已知宽高,IE5除外所有浏览器均兼容

纯CSS实现:盒子内元素垂直居中,宽高固定与否均可,IE5除外所有浏览器均兼容: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>纯CSS实现:盒子内元素垂直居中,宽高固定与否均可,IE5除外所有浏览器均兼容</title> 6 <style> 7 *{ margin:0; padding:0; } 8 di