浏览器兼容问题一：不同浏览器的标签默认的margin和padding不同 问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。碰到频率:100% 解决方案： CSS里加一行 1 *{margin:0;padding:0;} 备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。浏览器兼容问题二：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大 问题症状:常见症状是IE6中后面的一块被顶到下一行 碰到频率：90%（稍微复杂点的页面都会碰到，float布局最常见的浏览器兼容问题） 解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性 备注：我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。浏览器兼容问题三：设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度 问题症状：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度 碰到频率：60% 解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。浏览器兼容问题四：行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug 问题症状：IE6里的间距比超过设置的间距 碰到几率：20% 解决方案：在display:block;后面加入display:inline;display:table; 备注：行内属性标签，为了设置宽高，我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后，在IE6下，他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。浏览器兼容问题五：图片默认有间距 问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。碰到几率：20% 解决方案：使用float属性为img布局 备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。（我的一个学生使用负margin，虽然能解决，但负margin本身就是容易引起浏览器兼容问题的用法，所以我禁止他们使用） 浏览器兼容问题六：标签最低高度设置min-height不兼容 问题症状：因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容 碰到几率：5% 解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;} 备注：在B/S系统前端开时，有很多情况下我们又这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。浏览器兼容问题七：各种特殊样式的兼容，比如透明度、圆角、阴影等。特殊样式每个浏览器的代码区别很大，所以，只能现查资料通过给不同浏览器写不同的代码来解决。JS解决IE6下png透明失效的问题 做兼容页面的方法是：每写一小段代码（布局中的一行或者一块）我们都要在不同的浏览器中看是否兼容，当然熟练到一定的程度就没这么麻烦了。建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的，只要我们稍加设置都能轻松地解决这些兼容问题。如果我们熟悉标签的默认属性的话，就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。
一、CSS HACK以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) 2, IE6/IE77对FireFox *+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签. 注意: *+html 对IE7的HACK 必须保证HTML顶部有如下声明： 二、万能 float 闭合 关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup] 将以下代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽. 三、其他兼容技巧 1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决) 2, 居中问题. 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 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表) 6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应. 7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.1 针对firefox ie6 ie7的css样式现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示， 但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针 对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。现在写一个CSS可以这样： #1 * html #1 *+html #1 那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。
2 css布局中的居中问题主要的样式定义如下： body #center 说明： 首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ” 需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div， 只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。
3 盒模型不同解释 #box#box4 浮动ie产生的双倍距离 #box这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,...不可控制(内嵌元素); #box5 IE不认得min-这个定义但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样： #box6 页面的最小宽度 min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个
放到 标签下，然后为div指定一个类：然后CSS这样设计：#container第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
7 清除浮动 .hackbox或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持， 所 以并不影响到IE/WIN浏览器。这种的最麻烦的......#box:after8 DIV浮动IE文本产生3象素的bug 左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距. #boxHTML代码
9 属性选择器(这个不能算是兼容,是隐藏css的一个bug) p[id]这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用 属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的. 10 IE捉迷藏的问题 当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。
11 高度不适应 高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或paddign 时。例：
CSS：#box #box p 解决方法：在P对象上下各加2个空的div对象CSS代码：.1四、CSS兼容要点分析IE vs FF CSS 兼容要点： DOCTYPE 影响 CSS 处理 FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式 div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行 cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以 FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格XHTML+CSS兼容性解决方案小集 使用XHTML＋CSS构架好处不少，但也确实存在一些问题，不论是因为使用不熟练还是思路不清晰，我就先把一些我遇到的问题写在下面，省的大家四处找^^ 1、在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法： div注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样： div重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important; 2、IE5 和IE6的BOX解释不一致IE5下divdiv关于这个/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的话，请告诉我一声，谢了！：） 3、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义 ul就能解决大部分问题 4、关于脚本，在xhtml1.1中不支持language属性，只需要把代码改为 < type="text/java"> 就可以了 五、10个你未必知道的CSS技巧 1、CSS字体属性简写规则 一般用CSS设定字体属性是这样做的： font-weight:bold; font-style:italic; font-varient:small-caps; font-size:1em; line-height:1.5em; font-family:verdana,sans-serif; 但也可以把它们全部写到一行上去： font: bold italic small-caps 1em/1.5em verdana,sans-serif; 真不错！只有一点要提醒的：这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值，这点要记上。
2、同时使用两个类 一般只能给一个元素设定一个类（Class），但这并不意味着不能用两个。事实上，你可以这样：
...
同时给P元素两个类，中间用空格格开，这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话，后设置的起作用，即在CSS文件中放在后面的类的属性起作用。补充：对于一个ID，不能这样写
...
也不能这样写 3、CSS border的缺省值 通常可以设定边界的颜色，宽度和风格，如： border: 3px solid #000 这位把边界显示成3像素宽，黑色，实线。但实际上这里只需要指定风格即可。如果只指定了风格，其他属性就会使用缺省值。一般地，Border的宽度缺省是medium，一般等于3到4个像素；缺省的颜色是其中文字的颜色。如果这个值正好合适的话，就不用设那么多了。
4、CSS用于文档打印 许多网站上都有一个针对打印的版本，但实际上这并不需要，因为可以用CSS来设定打印风格。也就是说，可以为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印：
第1行就是显示，第2行是打印，注意其中的media属性。但应该在打印CSS中写什么东西呢？你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片，再关掉一些导航按钮。要想了解更多，可以看“打印差异”这一篇。
5、图片替换技巧 一般都建议用标准的HTML来显示文字，而不要使用图片，这样不但快，也更具可读性。但如果你想用一些特殊字体时，就只能用图片了。比如你想整个卖东西的图标，你就用了这个图片：
这当然可以，但对搜索引擎来说，和正常文字相比，它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的：
Buy widgets
但这样就没有特殊字体了。要想达到同样效果，可以这样设计CSS： h1 注意把image height换成真的图片的高度。这里，图片会当作背景显示出来，而真正的文字由于设定了-2000像素这个缩进，它们会出现在屏幕左边2000点的地方，就看不见了。但这对于关闭图片的人来说，可能全部看不到了，这点要注意。
6、CSS box模型的另一种调整技巧 这个Box模型的调整主要是针对IE6之前的IE浏览器的，它们把边界宽度和空白都算在元素宽度上。比如： #box 这样调用它：
...
这时盒子的全宽应该是150点，这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上，它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。但用CSS也可以达到同样的目的，让它们显示效果一致。#box 这样调用：
这样，不管什么浏览器，宽度都是150点了。
7、块元素居中对齐 如果想做个固定宽度的网页并且想让网页水平居中的话，通常是这样： #content 你会使用
来围上所有元素。这很简单，但不够好，IE6之前版本会显示不出这种效果。改CSS如下： body 这会把网页内容都居中，所以在Content中又加入了 text-align: left 。
8、用CSS来处理垂直对齐 垂直对齐用表格可以很方便地实现，设定表格单元 vertical-align: middle 就可以了。但对CSS来说这没用。如果你想设定一个导航条是2em高，而想让导航文字垂直居中的话，设定这个属性是没用的。CSS方法是什么呢？对了，把这些文字的行高设为 2em：line-height: 2em ，这就可以了。
9、CSS在容器内定位 CSS的一个好处是可以把一个元素任意定位，在一个容器内也可以。比如对这个容器： #container 这样容器内所有的元素都会相对定位，可以这样用：
如果想定位到距左30点，距上5点，可以这样： #navigation 当然，你还可以这样： margin: 5px 0 0 30px 注意4个数字的顺序是：上、右、下、左。当然，有时候定位的方法而不是边距的方法更好些。
10、直通到屏幕底部的背景色 在垂直方向是进行控制是CSS所不能的。如果你想让导航栏和内容栏一样直通到页面底部，用表格是很方便的，但如果只用这样的CSS： #navigation 较短的导航条是不会直通到底部的，半路内容结束时它就结束了。该怎么办呢？ 不幸的是，只能采用欺骗的手段了，给这较短的一栏加上个背景图，宽度和栏宽一样，并让它的颜色和设定的背景色一样。body 此时不能用em做单位，因为那样的话，一旦读者改变了字体大小，这个花招就会露馅，只能使用px。
5，关于CSS 浏览器兼容问题
这个是普遍的一个IE BUG， 2像素错误。
解决方法有几种，
第一种，不写hack（浏览器兼容性）代码的方法。
CSS如下:
#B {width:500px;height:200px;margin:0; padding:0;}
.b1，.b2{width:250px;height:200px;float: left;}
2个都用左浮动。
用HACK的方法
CSS如下:
#B {width:500px;height:200px;margin:0; padding:0;}
.b1{width:250px;height:200px;float: left;}
.b2{width:250px;height:200px;margin-left:-2px; margin-left:0px!important;}
IE读取margin-left:-2px; 会把B2左移2像素。
FF开始的时候读取margin-left:-2px; 然后后来的 margin-left:0px会覆盖开始读取的margin-left:-2px 所以FF不会变化。
!importantFF认识，IE6不认识
本文名称：css可用哪些方式兼容，经常遇到的css的兼容性有哪些
网站网址：
http://cdweb.net/article/ejscji.html
