快捷搜索:

IE与FF浏览器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

您可能还会对下面的文章感兴趣: