CSS完美兼容.docx

CSS完美兼容.docx

《CSS完美兼容.docx》由会员分享，可在线阅读，更多相关《CSS完美兼容.docx（12页珍藏版）》请在冰点文库上搜索。

CSS完美兼容

关于CSS对各个浏览器兼容已经是老生常谈的问题了,网络上的教程遍地都是.以下内容没有太多新颖,纯属个人总结,希望能对初学者有一定的帮助.

一、CSSHACK

HACK概念：

不同的浏览器，比如InternetExplorer6,InternetExplorer7,MozillaFirefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。

这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。

这个针对不同的浏览器写不同的CSScode的过程，就叫CSShack,

HACK规则：

IE都能识别*;标准浏览器（如FF）不能识别*；

IE6能识别*，但不能识别!

important,

IE7能识别*，也能识别!

important;

FF不能识别*，但能识别!

important;

IE6IE7FF

*√√×

!

important×√√

浏览器优先级别:

FF

例：

　　以:

"#demo{width:

100px;}"为例;

　　#demo{width:

100px;}

　　*html#demo{width:

120px;}

　　*+html#demo{width:

130px;}

　　---------------

　　所以最后,#demo的宽度在三个浏览器的解释为:

　　FIREFOX:

100px;

　　ie6:

120px;

　　ie7:

130px;以

下两种方法几乎能解决现今所有HACK.

1,!

important

随着IE7对!

important的支持,!

important方法现在只针对IE6的HACK.（注意写法.记得该声明位置需要提前.）

2,IE6/IE77对FireFox

*+html与*html是IE特有的标签,firefox暂不支持.而*+html又为IE7特有标签.

注意:

*+html对IE7的HACK必须保证HTML顶部有如下声明：

DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"　"http:

//www.w3.org/TR/html4/loose.dtd">

二、万能float闭合

关于clearfloat的原理可参见[HowToClearFloatsWithoutStructuralMarkup]

将以下代码加入GlobalCSS中,给需要闭合的div加上class="clearfix"即可,屡试不爽.

三、其他兼容技巧

1.

ul标签在Mozilla中默认是有padding值的，而在IE中只有margin有值。

所以先定义ul{margin:

0;padding:

0;}就能解决大部分问题。

也可用!

important解决

2.居中问题.

1）.垂直居中.将line-height设置为当前div相同的高度,再通过vertical-align:

middle.（注意内容不要换行.）

2）.水平居中.margin:

0auto;（当然不是万能）

你可以把html的body之内任何项目置于中，该项目将自动获得相等的左右边界值从而保证了居中显示。

不过，这在IE6之前版本的浏览器中仍然有问题，将不会居中，因此必须修改如下：

body{

text-align:

center;

}

#content{

text-align:

left;

width:

700px;

margin:

0auto;

}

对body的设定将导致主体内容居中，但是连所有的文字也居中了，这恐怕不是你想要的效果，为此#content的div还要指定一个值：

text-align:

left

3.IE5和IE6的BOX解释不一致

IE5下div{width:

300px;margin:

010px010px;}

div的宽度会被解释为300px-10px（右填充）-10px（左填充）最终div的宽度为280px，

而在IE6和其他浏览器上宽度则是以300px+10px（右填充）+10px（左填充）=320px来计算的。

这时我们可以做如下修改div{width:

300px!

important;width:

340px;margin:

010px010px}

关于这个是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的话，请告诉我一声，谢了！

：

）

4.FORM标签与ul标签的事先声明

这2个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和padding,针对上面两个问题,我的css中一般首先都使用这样的样式ul,form{margin:

0;padding:

0;}给定义死了,所以后面就不会为这个头疼了.

5.

cursor:

pointer可以同时在IEFF中显示游标手指状，hand仅IE可以

6.

如果文字过长，则将过长的部分变成省略号显示：

IE5，FF无效，但可以隐藏，IE6有效

120px；height：

50px；border：

1pxsolidblue；overflow：

hidden；text-overflow：

ellipsis”>就是比如有一行文字，很长，表格内一行显示不下。

P

固定宽度汉字截断：

overflow：

hidden；text-overflow：

ellipsis；white-space：

nowrap；（不过只能处理文字在一行上的截断，不能处理多行。

）（IE5以上）FF不能，它只隐藏。

7.

IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。

这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。

比如要设置背景图片，这个宽度是比较重要的。

要解决这个问题，可以这样：

#box{width:

80px;height:

35px;}html>body#box{width:

auto;height:

auto;min-width:

80px;min-height:

35px;}

8.浮动ie产生的双倍距离

#box{float:

left;width:

100px;margin:

000100px;//这种情况之下IE会产生200px的距离display:

inline;//使浮动忽略}

这里细说一下block与inline两个元素：

block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制（块元素）;Inline元素的特点是,和其他元素在同一行上,不可控制（内嵌元素）;

#box{display:

block;//可以为内嵌元素模拟为块元素display:

inline;//实现同一行排列的效果diplay:

table;

10.为什么FF下文本无法撑开容器的高度

标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢？

办法就是去掉height设置min-height:

200px;这里为了照顾不认识min-height的IE6可以这样定义:

{

height:

auto!

important;

height:

200px;

min-height:

200px;

}

11.清除浮动

.hackbox{display:

table;//将对象作为块元素级的表格显示}或者.hackbox{clear:

both;}

或者加入:

after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie浏览器支持，

所以并不影响到IE/WIN浏览器。

这种的最麻烦的......#box:

after{content:

".";display:

block;height:

0;clear:

both;visibility:

hidden;}

8DIV浮动IE文本产生3象素的bug

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

#box{float:

left;width:

800px;}#left{float:

left;width:

50%;}#right{width:

50%;}*html#left{margin-right:

-3px;//这句是关键}

HTML代码