本文列举并解决了多种浏览器兼容性问题，包括内外边距、水平垂直居中、高度设定等常见难题，尤其针对IE6-7特有的显示问题提供了解决方案。
1，默认的内外边距不同
问题：
各个浏览器默认的内外边距不同
解决：
* {保证金：0;填充：0;}
2，水平居中的问题
问题：
设置 text-align：center
ie6-7文本居中，嵌套的块元素也会居中
ff / opera / safari / ie8文本会居中，嵌套块不会居中
解决：
块元素设置
1，margin-left：auto; margin-right：auto
2，保证金：0自动;
3，<div align =“center”> </ div>
3.垂直居中的问题
问题：
在浏览器中想要垂直居中，设置vertical-align：middle; 不起作用。例如：ie6下文本与文本输入框对不齐，需设置vertical-align：middle，but是文本框的内容不会垂直居中
解决：
给容器设置一个与其高度相同的行高
行高：与容器的高度一样
4.关于高度问题
问题：
如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。
如果设定了高度，内容过多时，IE6下会自动增加高度，其他浏览器会超出边框
解决：
1.设置溢出：隐藏 ;
2.高度自增高度：自动重要;高度：100像素;
5. IE6默认的div高度
问题：
IE6默认DIV高度为一个字体显示的高度，所在IE6下DIV的高度大于等于一个字的高度，因此在IE6下定义高度为1像素的容器，显示的是一个字体的高度
解决：
为这个容器设置下列属性之一
如图1所示，设置溢出：隐藏;
2，设置行高：1px的;
3，设置变焦倍数：0.08
6. IE6最小高度（宽度）的问题
问题：
IE6不支持最小高度，最小宽度属性，默认高度是最小高度，宽度是最小宽度。
解决：
使用IE6不支持但其余浏览器支持的属性！重要的。
设置属性最小高度：200像素; 身高：自动！重要; 身高：200px ;
7. td高度的问题
问题：
表中TD的宽度都不包含边框的宽度，但是奥普雷亚和FF中TD的高度包含了边框的高度
解决：
设置行高和高度一样。在如中如果TD中的没有内容，那么边界将不会显示
8. div嵌套p时，出现空白行
问题：
格中显示<P>文本</ P>，FF，奥普雷亚，铬：顶部和底部都会出现空白行，但是在如下不会出现空白行。
解决：
设置p的margin：0px，再设置div的padding-top和padding-bottom
9. IE6-7图片下面有空隙的问题
问题：
块元素中含有图片时，ie6-7中会出现图片下有空隙
解决：
1，在源代码中让</ DIV>和<IMG>在同一行
2，将图片转换为块级对象显示：块;
3，设置图片的垂直对齐方式 垂直对齐：顶部/中部/底部
4，改变父对象的属性，如果父对象的宽，高固定，图片大小随父对象而定，那么可以对父元素设置： overflow：hidden;
5，设置图片的浮动属性 浮动：左;
10. IE6双倍边距的问题
问题：
IE6中设置浮动，同时又设置保证金时，会出现双倍边距的问题
例：float：left;宽度：100px; margin：0 100px;
解决：
设置显示：内联;
11. IE6 width为奇数，右边多出1px的问题
问题：
父级元素采用相对定位，且宽度设置为奇数时，子元素采用绝对定位，在IE6中会出现右侧多出1像素
解决：
宽度将的奇数值改成偶数
12. IE6两个层之间3px的问题
问题：
左边层采用浮动，右边没有采用浮动，这时在IE6中两层之间就会产生3像素的间距
解决：
1，右边层也采用浮动 浮
2，左边层添加属性 余量右：-3px;
13. IE6子元素绝对定位的问题
问题：
父级元素使用填充后，子元素使用绝对定位，不能精确定位
解决：
在子元素中设置 _Left：-20px; _top：-1px;
14.显示手型游标：手
问题：
ie6 / 7/8，歌剧都支持
但是是safari，ff不支持
解决：
写成 光标：指针; （所有浏览器都能识别）
15. IE6-7 line-height失效的问题
问题：
在ie ie img与文字放一起时，line-height不起作用
解决：
都设置成浮动
16. td自动换行的问题
问题：
表宽度固定，TD自动换行
解决：
设置表的table-layout：fixed，td的word-wrap：break-word
17.子容器浮动后，父容器扩展问题
问题：
子容器都浮以后，父容器没有设定高度，父容器将不会扩展
解决：
只需要添加一个明确的：两者的DIV，代码如下：
<div style =“border：1px solid＃333; width：204px”>
<divstyle =“width：100px; border：1px solid＃333; float：left;”>子容器a </ div>
<divstyle =“width：100px; border：1px solid＃333; float：left;”>子容器b </ div>
<divstyle = “明确：既”> </ DIV>
</ DIV>
18.透明png图片会带背景色
问题：
在IE6下透明的PNG图片会带一个背景色
解决：
background-image：url（icon_home.png）;
background-repeat：no-repeat;
_filter：的progid：DXImageTransform.Microsoft.AlphaImageLoader（SRC = 'icon_home.png'）;
_background-image：none;
19. list-style-position默认值的问题
问题：
即下列表样式位置默认为里面，firefox默认为外
解决：
CSS中指定为外即可解决兼容性问题
20. list-style-image准确定位的问题
问题：
李前设置图片时，图片与其后的文字对齐问题
解决：
1，采用背景定位和字符缩进的方法
background：url（）no-repeat left center; text-index：16px;
2，采用相对定位方法
li设置list-style：url（）;
立的子元素的位置是：相对于;顶部：-5px;
21. ul标签默认值的问题
问题：
UL标签在FF中默认是有填充值的，而在例如中只有余量有值
解决：
定义UL {余量：0;填充：0;}就能解决大部分问题
22. IE中li指定高度后，出现排版错误
问题：
在即下如果为李指定高度可能会出现排版错位
解决：
设置行高
23. ul或li浮动后，显示在div外
问题：
格中的UL或立设置浮动以后，都不在DIV中
解决：
必须在ul标签后加<div style =“clear：both”> </ div>来闭合外层div
24. ul浮动后，margin变大
问题：
ul设置float后，在ie中缘将变大
解决：
设置ul的显示：inline，li的list-style-position：outside
25. li浮动后，margin变大
问题：
li设置float后，在ie中缘将变大
解决：
设置李的显示：内联
26.嵌套使用ul，li的问题
问题：
ie的bug，嵌套使用ul，li时，里层的li设置float以后，外层li不设置float，里面的ul顶部和它外面的li总是有一段间距
解决：
设置里面的UL的变焦倍数：1
27. IE6-7 li底部有3px的问题
问题：
这个错误产生的充要条件是立的子元素浮动并且立设置了以下CSS属性之一：宽度，高度，缩放，填充顶部，填充底，上边距，边距。
解决：
1，div设置clear：left | both，这时li不能设置width，height，zoom。
2，li设置float：left，这时li可以设置宽度，高度，缩放。
3，li设置clear：left | both，这时li不能设置宽度，高度，缩放。
4，IE6 / IE7的这个错误可以通过给李中的DIV设置垂直对齐：顶部|中|底解决。
28. IE6垂直列表间隙的问题
问题：
利中有一个且设置显示：块时，IE6中列表间会出现空隙
解决：
1，李中加显示：内联;
2，li使用浮然然后 清除：两者;
3，给包含的文本末尾添加一个空格
4，设置宽度
29. IE6列表背景颜色失效的问题
问题：
当父元素设置的位置是：相对于;时，在IE6中第一个UL，醇，DL的背景颜色失效
解决：
ul，ol，dl都设置为position：relative;
30. IE6-7列表背景颜色失效的问题2
问题：
做横向导航栏时，UL设置为漂浮且有背景色，李设置为float.ie6-7背景颜色失效
解决：
很多ie的bug都可以通过触发布局来解决ul添加属性
1，身高：1％;
2，浮动：左;
3，缩放：1;
31.列表不能换行的问题
问题：
李设置为浮动，后面的李紧随其后，不能换行
解决：
1，为这个UL定义合适的宽高
2，给包含这个ul的父div定义合适的宽高。
32. li中的内容以省略号显示
问题：
li中内容超过长度时，想以省略号显示，此方法适用于ie6-7-8，opera，safari浏览器
FF浏览器不支持
解决：
李{宽度：200像素;空白：NOWRAP;文本溢出：省略号;
-o-文本溢出：省略号; 溢出：隐藏; }
33.超链接访问过后hover样式不出现的问题
问题：
点击超链接后，悬停，活性样式没有效果
解决：
改变CSS属性的排序顺序：LVHA
34.禁用中文输入法的问题
问题：
不能在输入框中输入汉字
解决：
只在如系列和FF中有效
ime-mode：disabled （但可以粘贴）
禁用粘贴：
onpaste =“return false”
35.除去滚动条的问题
问题：
隐藏滚动条
解决：
1，只有ie6-7支持<body scroll =“no”>
2，除ie6-7不支持 体{溢出：隐藏}
3，所有浏览器 的HTML {溢出：隐藏}
36.让层显示在FLASH之上
问题：
想让层的内容显示在闪存上
解决：
把FLASH设置透明
1，<param name =“wmode”value =“transparent”/>
2，<param name =“wmode”value =“opaque”/>
37.去除链接虚线边框的问题
问题：
当点击超链接后，ie6 / 7/8 ff会出现虚线边框，而歌剧，safari没有虚线边框
解决：
ie6 / 7中设置为a {blr：expression_r（this.onFocus = this.blur（））}
ie8和ff都不支持表达在ie8，ff中设置为 ：focus {outline：none; }
38. css滤镜的问题
问题：
css滤镜只在即中有效，Firefox，Safari（WebKit），Opera只能够设置透明，它们不支持滤镜，无法实现图片切换中间变换的效果，只能通过透明度来设置。
解决：
FF中设置透明度 -moz-不透明度：0.10; 不透明度：0.6;
即中只设置滤波器：α（不透明度= 50）;时，ie6-7失效，还要设置
1，缩放：1; 2，宽度：100％;
39. IE6背景闪烁的问题
问题：
链接，按钮用CSS sprites作为背景，在ie6下会有背景图闪烁的现象。原因是：IE6没有将背景图缓存，每次触发hover的时候都会重新加载
解决：
可以用JavaScript的设置IE6缓存这些图片：
document.execCommand（ “BackgroundImageCache”，假的，真正的）;
40.出现重复文字的问题
问题：
<div style =“width：400px”>
<div style =“float：left”> </ div>
<！ - _ - >
<div style =“float：right; width：400px”>↓这就是多出来的那只猪</ div>
</ DIV>
解决：
1，改变结构，不出现【一个容器包含2两个具有“float”样式的子容器】的结构。
2，减小第二个容器的宽度，使父容器宽度减去第二个容器宽度的值大于3
3，去掉所有的注释。
如图4所示，修正注释的写法。<！ - [如果IE！]>这里是注释内容<[ENDIF]！ - >
5，在第二个容器后面加一个或者多个<divstyle = “清除”> </ DIV>来解决。
41. ff，chrome绝对定位无效
问题：
在IE给TD设置的位置是：相对的，然后给它包含的一个容器使用位置是：绝对进行定位是有效的，但在FF和铬下却不可以。
解决：
设置td的display：block。
42. IE6绝对定位的问题
问题：
<div style =“position：relative; border：1px solid orange; text-align：center;”>
<div style =“position：absolute; top：0; left：0;
背景：#CCC;“> dovapour </ DIV>
<a href="#"title="vapourblog">内容</a>
</ DIV>
解决：
留下的定位错误问题
1，给父层设置变焦：1个触发布局。
2，给父层设置宽度宽
底部的定位错误问题
1，给父层设置变焦：1个触发布局。
2，给父层设置高度的高度
43.子容器宽度大于父容器宽度时，内容超出
问题：
子DIV的宽度和父DIV的宽度都已经定义，在IE6中如果其子DIV的宽度大于父DIV的宽度，父DIV的宽度将会被扩展，在其他浏览器中父DIV的宽度将不会扩展，子DIV将超出父DIV
解决：
设置overflow：hidden，子DIV将不会超出父DIV。
44. float的div闭合的问题
问题：
例如：<div id =“floatA”> <div id =“floatB”> <div id =“NOTfloatC”>这里的NOTfloatC并不希望继续平移，而是希望往下排。（其中floatA，floatB的属性已经设置为浮动：左）
这段代码在IE中毫无问题，问题出在其他浏览器中。原因是NOTfloatC并非浮子标签，必须将浮子标签闭合。
解决：
在<#div class =“floatB”> <#div class =“NOTfloatC”>之间加上<#div class =“clear”>这个div一定要注意位置，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。并且将明确这种样式定义为为如下即可：.clear {clear：both;}
45.单选框，复选框与后面的文字对齐齐
问题：
单选框，复选框与后面的文字对不齐。
解决：
.align伪{字体大小：12像素;}
.align input {display：block; 向左飘浮;}
.align label {display：block; 浮动：左;填充顶：3px的; *填充顶：5像素;}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
