2100人阅读
Front-end（18）
所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。
在学习浏览器兼容性之前，我想把前端开发人员划分为两类：
第一类是精确按照设计图开发的前端开发人员，可以说是精确到1px的，他们很容易就会发现设计图的不足，并且在很少的情况下会碰到浏览器的兼容性问题，而这些问题往往都是浏览器的bug，并且他们制作的页面后期易维护，代码重用问题少，可以说是比较牢固放心的代码。
第二类是基本按照设计图来开发的前端开发人员，很多细枝末节差距很大，不如间距，行高，图片位置等等经常会差几px。某种效果的实现也是反复调试得到，具体为什么出现这种效果还模模糊糊，整体布局十分脆弱。稍有改动就乱七八糟。代码为什么这么写还不知所以然。这类开发人员往往经常为兼容性问题所困。修改好了这个浏览器又乱了另一个浏览器。改来改去也毫无头绪。其实他们碰到的兼容性问题大部分不应该归咎于浏览器，而是他们的技术本身了。
这篇文章主要针对的是第一类，严谨型的开发人员，因此这里主要从浏览器解析差异的角度来分析兼容性问题
浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同
& & 问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。
& & 碰到频率:100%
& & 解决方案：css里& & *{margin:0;padding:0;}
& & 备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的css文件开头都会用通配符*来设置各个标签的内外补丁是0。
浏览器兼容问题二：块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大
& & 问题症状:常见症状是ie6中后面的一块被顶到下一行
& & 碰到频率：90%（稍微复杂点的页面都会碰到，float布局最常见的浏览器兼容问题）
& & 解决方案：在float的标签样式控制中加入 display:将其转化为行内属性
& & 备注：我们最常用的就是div+css布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。
浏览器兼容问题三：设置较小高度标签（一般小于10px），在ie6，ie7，遨游中高度超出自己设置高度
& & 问题症状：ie6、7和遨游里这个标签的高度不受控制，超出自己设置的高度
& & 碰到频率：60%
& & 解决方案：给超出高度的标签设置overflow:或者设置行高line-height 小于你设置的高度。
& & 备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是ie8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。
浏览器兼容问题四：行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，ie6间距bug（类似第二种）
& & 问题症状：ie6里的间距比超过设置的间距
& & 碰到几率：20%
& & 解决方案：在display:后面加入display:display:
& & 备注：行内属性标签，为了设置宽高，我们需要设置display:(除了input标签比较特殊)。在用float布局并有横向的margin后，在ie6下，他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。
浏览器兼容问题五：图片默认有间距
& & 问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。
& & 碰到几率：20%
& & 解决方案：使用float属性为img布局
& & 备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。
浏览器兼容问题六：标签最低高度设置min-height不兼容
& & 问题症状：因为min-height本身就是一个不兼容的css属性，所以设置min-height时不能很好的被各个浏览器兼容
& & 碰到几率：5%
& & 解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200 height:auto ! height:200 overflow:}
& & 备注：在B/S系统前端开时，有很多情况下我们又这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。
浏览器兼容问题七：透明度的兼容css设置
方法是：每写一小段代码（布局中的一行或者一块）我们都要在不同的浏览器中看是否兼容，当然熟练到一定的程度就没这么麻烦了。建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的，只要我们稍加设置都能轻松地解决这些兼容问题。如果我们熟悉标签的默认属性的话，就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。
/* css hack*/
我很少使用hacker的，可能是个人习惯吧，我不喜欢写的代码ie不兼容，然后用hack来解决。不过hacker还是非常好用的。
使用hacker 我可以吧浏览器分为3类：ie6 ；ie7和遨游；其他（ie8 chrome ff safari opera等）
ie6认识的hacker 是下划线_ 和星号 *
ie7 遨游认识的hacker是星号 * （包括上面问题6中的 !important也算是hack的一种。不过实用性较小。）
比如这样一个css设置 height:300*height:200_height:100
ie6浏览器在读到 height:300px的时候会认为高时300px；继续往下读，他也认识*heihgt， 所以当ie6读到*height:200px的时候会覆盖掉前一条的相冲突设置，认为高度是200px。继续往下读，ie6还认识_height,所以他又会覆盖掉200px高的设置，把高度设置为100px；
ie7和遨游也是一样的从高度300px的设置往下读。当它们读到*height200px的时候就停下了，因为它们不认识_height。所以它们会把高度解析为200px；
剩下的浏览器只认识第一个height:300所以他们会把高度解析为300px。
因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个，所以书写的次序是很重要的。
最后说一下，严谨型的开发人员会有一套合适自己的RESET.CSS。结合自己的经验尽量规避容易出现不兼容的问题。以减少hack的使用，尽量符合W3C的标准。
原文链接：&/topic/20411
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：28841次
排名：千里之外
转载：101篇
(1)(5)(2)(11)(15)(16)(17)(20)(15)
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'WEB前端开发人员须知的常见浏览器兼容问题及解决技巧 - 知乎专栏
{"debug":false,"apiRoot":"","paySDK":"/api/js","wechatConfigAPI":"/api/wechat/jssdkconfig","name":"production","instance":"column","tokens":{"X-XSRF-TOKEN":null,"X-UDID":null,"Authorization":"oauth c3cef7c66aa9e6a1e3160e20"}}
{"database":{"Post":{"":{"contributes":[],"title":"WEB前端开发人员须知的常见浏览器兼容问题及解决技巧","author":"xu-xiao-bai-47-14","content":"为什么会有兼容问题？由于市场上浏览器种类众多，而不同浏览器其内核亦不尽相同，所以各个浏览器对网页的解析就有一定出入，这也是导致浏览器兼容问题出现的主要原因，我们的网页需要在主流浏览器上正常运行，就需要做好浏览器兼容。使用Trident内核的浏览器：IE、Maxthon、TT；
使用Gecko内核的浏览器：Netcape6及以上版本、FireFox；
使用Presto内核的浏览器：Opera7及以上版本；
使用Webkit内核的浏览器：Safari、Chrome。 \n而我现在所说的兼容性问题，主要是说IE与几个主流浏览器如firefox，google等。而对IE浏览器来说，IE7又是个跨度，因为之前的版本更新甚慢，bug甚多。从IE8开始，IE浏览器渐渐遵循标准，到IE9后由于大家都一致认为标准很重要，可以说在兼容性上比较好了，但是在中国来说，由于xp的占有率问题，使用IE7以下的用户仍然很多，所以我们不得不考虑低版本浏览器的兼容。对浏览器兼容问题，一般分，HTML，Javascript兼容，CSS兼容。 其中html相关问题比较容易处理，无非是高版本浏览器用了低版本浏览器无法识别的元素，导致其不能解析，所以平时注意一点就是。特别是HTML5增加了许多新标签，低版本浏览器有点影响时代进步啊问题一：不同浏览器的标签默认的外补丁和内补丁不同
问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。
碰到频率:100%
解决方案：css里
*{margin:0;padding:0;}
备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的css文件开头都会用通配符*来设置各个标签的内外补丁是0。问题二：块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大
问题症状:常见症状是ie6中后面的一块被顶到下一行
碰到频率：90%（稍微复杂点的页面都会碰到，float布局最常见的浏览器兼容问题）
解决方案：在float的标签样式控制中加入 display:将其转化为行内属性
备注：我们最常用的就是div+css布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。问题三：设置较小高度标签（一般小于10px），在ie6，ie7，遨游中高度超出自己设置高度
问题症状：ie6、7和遨游里这个标签的高度不受控制，超出自己设置的高度
碰到频率：60%
解决方案：给超出高度的标签设置overflow:或者设置行高line-height 小于你设置的高度。
备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是ie8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。问题四：行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，ie6间距bug（类似第二种）
问题症状：ie6里的间距比超过设置的间距
碰到几率：20%
解决方案：在display:后面加入display:display:
备注：行内属性标签，为了设置宽高，我们需要设置display:(除了input标签比较特殊)。在用float布局并有横向的margin后，在ie6下，他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。问题五：图片默认有间距
问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加上问题一中提到的通配符也不起作用。
碰到几率：20%
解决方案：使用float属性为img布局
备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。问题六：标签最低高度设置min-height不兼容
问题症状：因为min-height本身就是一个不兼容的css属性，所以设置min-height时不能很好的被各个浏览器兼容
碰到几率：5%
解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200 height:auto ! height:200 overflow:}
备注：在B/S系统前端开时，有很多情况下我们有这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。问题七：透明度的兼容css设置方法是：每写一小段代码（布局中的一行或者一块）我们都要在不同的浏览器中看是否兼容，当然熟练到一定的程度就没这么麻烦了。建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的，只要我们稍加设置都能轻松地解决这些兼容问题。如果我们熟悉标签的默认属性的话，就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。技巧一：/* css hack*/使用hacker 我可以把浏览器分为3类：ie6 ；ie7和遨游；其他（ie8 chrome ff safari opera等）ie6认识的hacker 是下划线_ 和星号 *ie7 遨游认识的hacker是星号 * （包括上面问题6中的 !important也算是hack的一种。不过实用性较小。）比如这样一个css设置 height:300*height:200_height:100ie6浏览器在读到 height:300px的时候会认为高时300px；继续往下读，他也认识*heihgt， 所以当ie6读到*height:200px的时候会覆盖掉前一条的相冲突设置，认为高度是200px。继续往下读，ie6还认识_height,所以他又会覆盖掉200px高的设置，把高度设置为100px；ie7和遨游也是一样的从高度300px的设置往下读。当它们读到*height200px的时候就停下了，因为它们不认识_height。所以它们会把高度解析为200px；剩下的浏览器只认识第一个height:300所以他们会把高度解析为300px。因为优先级相同且相冲突的属性设置后一个会覆盖掉前一个，所以书写的次序是很重要的。/* CSS属性级Hack */ color: /* 所有浏览器可识别*/_color: /* 仅IE6 识别 */*color: /* IE6、IE7 识别 */+color: /* IE6、IE7 识别 */*+color: /* IE6、IE7 识别 */[color: /* IE6、IE7 识别 */ color:red\\9; /* IE6、IE7、IE8、IE9 识别 */color:red\\0; /* IE8、IE9 识别*/color:red\\9\\0; /* 仅IE9识别 */color:red \\0; /* 仅IE9识别 */color:red! /* IE6 不识别!important 有危险*//* CSS选择符级Hack */ *html #demo { color:} /* 仅IE6 识别 */*+html #demo { color:} /* 仅IE7 识别 */body:nth-of-type(1) #demo { color:} /* IE9+、FF3.5+、Chrome、Safari、Opera 可以识别 */ head:first-child+body #demo { color: } /* IE7+、FF、Chrome、Safari、Opera 可以识别 */:root #demo { color:red\\9; } : /* 仅IE9识别 */越少的浮动，就会越少的代码，会有更灵活的页面，会有扩展性更强的页面。这不多说，归结为到一定水平了，浮动会用的较少。另外，您也会避免使用浮动+margin的用法。所以，越后来越不易遇到这种bug。技巧二：padding，marign，height，width 注意是技巧，不是方法： 写好标准头
尽量用padding，慎用margin，height尽量补上100%，父级height有定值子级height不用100%，子级全为浮动时底部补个空clear:both的div宽尽量用margin，慎用padding，width算准实际要的减去padding技巧三：显示类（display:block,inline）
display:block,inline两个元素
display: //可以为内嵌元素模拟为块元素
display: //实现同一行排列的的效果
display: //for FF,模拟table的效果
display:block块元素，元素的特点是：
总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度 display:inline就是将元素显示为行内元素，元素的特点是：和其他元素都在一行上；高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。&span&，&a&，&label&，&input&，&img&，&strong&和&em&是 inline 元素的例子技巧四：怎样使一个div层居中于浏览器中？
1） &style type=\"text/css\"& &!-- div {
position: top:50%; left:50%;
margin:-100px 0 0 -100 width:200 height:200 border:1 } --& &/style&2）div里的内容，IE默认为居中，而FF默认为左对齐，可以尝试增加代码margin: 0技巧五：float的div闭合;清除浮动;自适应高度① 例如：＜div id=”floatA”&＜div id=”floatB”&＜div id=”NOTfloatC”&这里的NOTfloatC并不希望继续平移，而是希望往下排。(其中floatA、floatB的属性已经设置为float:)这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。在＜divclass=”floatB”&＜div class=”NOTfloatC”&之间加上＜div class=”clear”&这个div一定要注意位置，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。并且将clear这种样式定义为为如下即可：.clear{clear:}②作为外部 wrapper 的 div 不要定死高度,为了让高度能自适应，要在wrapper里面加上overflow: 当包含float的box的时候，高度自适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。例如某一个wrapper如下定义：.colwrapper{overflow: zoom:1; margin:5}③对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,譬如:&div id=”page”&&div id=”left”&＜/div&&div id=”center”&＜/div&&div id=”right”&＜/div&&/div&比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left centerright的向下拉长,而page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成float,所以我们应该这样解决：&div id=”page”&&div id=”bg” style=”float:width:100%”&&div id=”left”&＜/div&&div id=”center”&＜/div&&div id=”right”&＜/div&&/div&&/div&再嵌入一个float left而宽度是100%的DIV解决之。④万能float 闭合(非常重要!)关于 clear float 的原理可参见 [How To ClearFloats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上class=\"clearfix\"即可,屡试不爽。/* Clear Fix */ .clearfix:after { content:\".\"; display: height:0; clear:visibility: } .clearfix { display:inline- } /* Hide from IE Mac */ .clearfix {display:} /* End hide from IE Mac */ /* end of clearfix */或者这样设置：.hackbox{display: //将对象作为块元素级的表格显示}技巧六：div嵌套时 y轴上 padding和 marign的问题FF里 y 轴上 子div 到 父div 的距离为 父padding + 子marignIE里 y 轴上 子div 到 父div 的距离为 父padding 和 子marign 里大的一个FF里 y 轴上 父padding=0 且 border=0 时，子div 到 父div 的距离为0，子marign 作用到 父div 外面","updated":"T08:49:50.000Z","canComment":false,"commentPermission":"anyone","commentCount":1,"collapsedCount":0,"likeCount":3,"state":"published","isLiked":false,"slug":"","isTitleImageFullScreen":false,"rating":"none","titleImage":"","links":{"comments":"/api/posts//comments"},"reviewers":[],"topics":[{"url":"/topic/","id":"","name":"前端开发"},{"url":"/topic/","id":"","name":"浏览器兼容性"}],"adminClosedComment":false,"titleImageSize":{"width":0,"height":0},"href":"/api/posts/","excerptTitle":"","tipjarState":"closed","annotationAction":[],"sourceUrl":"","pageCommentsCount":1,"hasPublishingDraft":false,"snapshotUrl":"","publishedTime":"T16:49:50+08:00","url":"/p/","lastestLikers":[{"bio":"纸上得来终觉浅，绝知此事要躬行","isFollowing":false,"hash":"a0b27afebfe7c4b6e606691","uid":12,"isOrg":false,"slug":"mluka","isFollowed":false,"description":"我都不了解我自己，怎么向你介绍","name":"崂山盗汗","profileUrl":"/people/mluka","avatar":{"id":"v2-672fb3ba600","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false},{"bio":"前端开发","isFollowing":false,"hash":"5fc20bde283adccf638abc","uid":803000,"isOrg":false,"slug":"dan-shen-de-fen-fang","isFollowed":false,"description":"","name":"单身的芬芳","profileUrl":"/people/dan-shen-de-fen-fang","avatar":{"id":"da8e974dc","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false},{"bio":"计算机","isFollowing":false,"hash":"4c59f667bbe710c7f25e1","uid":904400,"isOrg":false,"slug":"zheng-tai-yu-27","isFollowed":false,"description":"","name":"郑泰宇","profileUrl":"/people/zheng-tai-yu-27","avatar":{"id":"da8e974dc","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false}],"summary":"为什么会有兼容问题？由于市场上浏览器种类众多，而不同浏览器其内核亦不尽相同，所以各个浏览器对网页的解析就有一定出入，这也是导致浏览器兼容问题出现的主要原因，我们的网页需要在主流浏览器上正常运行，就需要做好浏览器兼容。使用Trident内核的浏览…","reviewingCommentsCount":0,"meta":{"previous":null,"next":null},"annotationDetail":null,"commentsCount":1,"likesCount":3,"FULLINFO":true}},"User":{"xu-xiao-bai-47-14":{"isFollowed":false,"name":"徐小白","headline":"换一种心态，你会发现不一样的世界。","avatarUrl":"/v2-70add7a5bccbb595a7691_s.jpg","isFollowing":false,"type":"people","slug":"xu-xiao-bai-47-14","bio":"态度决定一切","hash":"a88aeff0c1ef3bdc8ef9150","uid":609700,"isOrg":false,"description":"换一种心态，你会发现不一样的世界。","profileUrl":"/people/xu-xiao-bai-47-14","avatar":{"id":"v2-70add7a5bccbb595a7691","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false,"badge":{"identity":null,"bestAnswerer":null}}},"Comment":{},"favlists":{}},"me":{},"global":{},"columns":{"next":{}},"columnPosts":{},"columnSettings":{"colomnAuthor":[],"uploadAvatarDetails":"","contributeRequests":[],"contributeRequestsTotalCount":0,"inviteAuthor":""},"postComments":{},"postReviewComments":{"comments":[],"newComments":[],"hasMore":true},"favlistsByUser":{},"favlistRelations":{},"promotions":{},"switches":{"couldAddVideo":false},"draft":{"titleImage":"","titleImageSize":{},"isTitleImageFullScreen":false,"canTitleImageFullScreen":false,"title":"","titleImageUploading":false,"error":"","content":"","draftLoading":false,"globalLoading":false,"pendingVideo":{"resource":null,"error":null}},"drafts":{"draftsList":[],"next":{}},"config":{"userNotBindPhoneTipString":{}},"recommendPosts":{"articleRecommendations":[],"columnRecommendations":[]},"env":{"isAppView":false,"appViewConfig":{"content_padding_top":128,"content_padding_bottom":56,"content_padding_left":16,"content_padding_right":16,"title_font_size":22,"body_font_size":16,"is_dark_theme":false,"can_auto_load_image":true,"app_info":"OS=iOS"},"isApp":false},"sys":{}}3616人阅读
浏览器兼容问题
1. 默认的内外边距不同
各个浏览器默认的内外边距不同
*{margin:0;padding:0;}
2. 水平居中的问题
设置&text-align: center &
ie6-7文本居中，嵌套的块元素也会居中
ff /opera /safari /ie8文本会居中，嵌套块不会居中
块元素设置
1、margin-left:margin-right:auto
2、margin:0
3、&div align=”center”&&/div&
3. 垂直居中的问题
在浏览器中想要垂直居中，设置vertical-align:
不起作用。例如：ie6下文本与文本输入框对不齐，需设置vertical-align:middle，但是文本框的内容不会垂直居中
给容器设置一个与其高度相同的行高
line-height:与容器的height一样
4. 关于高度问题
如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。
如果设定了高度，内容过多时，ie6下会自动增加高度、其他浏览器会超出边框
1.设置overflow:
2.高度自增height:auto!height:100
5. IE6 默认的div高度
ie6默认div高度为一个字体显示的高度，所在ie6下div的高度大于等于一个字的高度，因此在ie6下定义高度为1px的容器，显示的是一个字体的高度
为这个容器设置下列属性之一
1、设置overflow:
2、设置line-height:1
3、设置zoom:0.08
6. IE6 最小高度(宽度)的问题
ie6不支持min-height、min-width属性，默认height是最小高度，width是最小宽度。
&&&&使用ie6不支持但其余浏览器支持的属性!important。
设置属性min-height:200 height:auto ! height:200
7. td高度的问题
table中td的宽度都不包含border的宽度，但是oprea和ff中td的高度包含了border的高度
&&&&&&&设置line-height和height一样。在ie中如果td中的没有内容，那么border将不会显示
8. div嵌套p时，出现空白行
div中显示&p&文本&/p&，ff、oprea、Chrome：top和bottom都会出现空白行，但是在ie下不会出现空白行。
设置p的margin:0px，再设置div的padding-top和padding-bottom
9. IE6-7图片下面有空隙的问题
块元素中含有图片时，ie6-7中会出现图片下有空隙
1、在源代码中让&/div&和&img&在同一行
2、将图片转换为块级对象display:
3、设置图片的垂直对齐方式&vertical-align:top/middle/bottom
4、改变父对象的属性，如果父对象的宽、高固定，图片大小随父对象而定，那么可以对父元素设置：&overflow:
5、设置图片的浮动属性&&float:
10. IE6双倍边距的问题
ie6中设置浮动，同时又设置margin时，会出现双倍边距的问题
例float:width:100margin:0 100
&&&&&&&设置display:
11. IE6 width为奇数，右边多出1px的问题
父级元素采用相对定位，且宽度设置为奇数时，子元素采用绝对定位，在ie6中会出现右侧多出1像素
将宽度的奇数值改成偶数
12. IE6两个层之间3px的问题
&&&&&&&左边层采用浮动，右边没有采用浮动，这时在ie6中两层之间就会产生3像素的间距
1、右边层也采用浮动&&float
2、左边层添加属性&margin-right:-3
13. IE6 子元素绝对定位的问题
&&&&&&&父级元素使用padding后，子元素使用绝对定位，不能精确定位
&&&&&&&在子元素中设置&&_left:-20 _top:-1
14. 显示手型cursor:hand
&&&&&&ie6/7/8、opera &&&&&都支持&&
&但是safari 、&ff
写成&cursor: &(所有浏览器都能识别) &
15. IE6-7 line-height失效的问题
&&&&&&在ie中img与文字放一起时，&line-height不起作用&
都设置成float
16. td自动换行的问题
Table宽度固定，td自动换行
设置Table的table-layout:fixed，td的word-wrap:break-word
17. 子容器浮动后，父容器扩展问题
子容器都float以后，父容器没有设定高度,父容器将不会扩展
只需要添加一个clear:both的div，代码如下：
&div style=&border:1px solid#333;width:204px&&
&&&&&divstyle=&width:100border:1px solid #333; float: &&子容器a&/div&
&&&&&divstyle=&width:100border:1px solid #333; float:&&子容器b&/div&
&&&&&divstyle=&clear:both&&&/div&
18. 透明png图片会带背景色
在ie6下透明的png图片会带一个背景色
background-image: url(icon_home.png);
background-repeat: no-
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon_home.png');
_background-image:
19. list-style-position默认值的问题
ie下list-style-position默认为inside, &firefox默认为outside
css中指定为outside即可解决兼容性问题
20. list-style-image准确定位的问题
&&&&&&&li前设置图片时，图片与其后的文字对齐问题
1、采用背景定位&和&字符缩进的方法
background:url() no-text-index:16
2、采用相对定位方法
li 设置list-style:url();
li的子元素position:top:-5
21. ul标签默认值的问题
&&&&&&&ul标签在ff中默认是有padding值的,而在ie中只有margin有值
&&&&&&&定义ul{margin:0;padding:0;}就能解决大部分问题
22. IE中li指定高度后，出现排版错误
在ie下如果为li指定高度可能会出现排版错位
&&&&&&&设置line-height
23. ul或li浮动后，显示在div外
div中的ul或li设置float以后，都不在div中
必须在ul标签后加&div style=&clear:both&&&/div&来闭合外层div
24. ul浮动后，margin变大
ul设置&float后，在ie中margin将变大
设置ul的display:inline，li的list-style-position:outside
25. li浮动后，margin变大
li设置&float后，在ie中margin将变大
设置li的display:inline
26. 嵌套使用ul、li的问题
ie的bug，嵌套使用ul、li时，里层的li设置float以后，外层li不设置float,
里面的ul顶部和它外面的li总是有一段间距
设置里面的ul的zoom:1
27. IE6-7 li底部有3px的问题
&&&&&&&这个bug产生的充要条件是li的子元素浮动并且li设置了以下CSS属性之一：width、height、zoom、padding-top、padding-bottom、margin-top、margin-bottom。
1、div设置clear:left|both，这时li不能设置width、height、zoom。
2、li设置float:left，这时li可以设置width、height、zoom。
3、li设置clear:left|both，这时li不能设置width、height、zoom。
4、IE6/IE7的这个Bug可以通过给li中的div设置vertical-align:top|middle|bottom解决。
28. IE6 垂直列表间隙的问题
&&&&&&&li中有a且设置display:block时，ie6中列表间会出现空隙
1、li中加display:
2、li使用float
然后&clear:
3、给包含的文本末尾添加一个空格
4、设置width
29. IE6 列表背景颜色失效的问题
当父元素设置position:时，在ie6中第一个ul、ol、dl的背景颜色失效
&&&&&&&ul、ol、dl
都设置为position:
30. IE6-7 列表背景颜色失效的问题2
做横向导航栏时，ul设置为float且有背景色，li设置为float。ie6-7背景颜色失效
很多ie的bug都可以通过触发layout来解决&ul添加属性
1、height:1%;
3、zoom:1;
31. 列表不能换行的问题
&&&&&&&li设置为浮动，后面的li紧随其后，不能换行
1、为这个ul定义合适的宽高
2、给包含这个ul 的父div定义合适的宽高。
32. li中的内容以省略号显示
li中内容超过长度时，想以省略号显示，&此方法适用于ie6-7-8、opera、safari浏览器&
ff浏览器不支持
li{width:200white-space:text-overflow:
-o-text-overflow: overflow: }
33. 超链接访问过后hover样式不出现的问题
&&&&&&&点击超链接后，hover、active样式没有效果
&&&&&&&改变CSS属性的排列顺序: L-V-H-A
34. 禁用中文输入法的问题
&&&&&&&不能在输入框中输入汉字
只在ie系列和ff中有效
ime-mode:disabled &&&(但可以粘贴)
禁用粘贴：
onpaste=&return false&
35. 除去滚动条的问题
&&&&&&&隐藏滚动条
1、只有ie6-7支持&body&scroll=&no&&
2、除ie6-7不支持&body{overflow:hidden}
3、所有浏览器&html{overflow:hidden}
36. 让层显示在FLASH之上
&&&&&&&想让层的内容显示在flash上
把FLASH设置透明
1、¶m&name=& wmode & value=&transparent& /&
2、¶m&name=&wmode& value=&opaque&/&
37. 去除链接虚线边框的问题
当点击超链接后，ie6/7/8 &ff会出现虚线边框&,而opera、safari没有虚线边框
ie6/7中&设置为a {blr:expression_r(this.onFocus=this.blur()) }
ie8 和&ff 都不支持expression
在ie8 、ff中设置为&&:focus { outline: }
38. css滤镜的问题
&&&&css滤镜只在ie中有效，Firefox, Safari(WebKit), Opera只能够设置透明，它们不支持滤镜filter，无法实现图片切换中间变换的效果，只能通过透明度来设置。
&&&&&&&ff中设置透明度&&&-moz-opacity:0.10; opacity:0.6;
ie中只设置filter:alpha(opacity=50);时，ie6-7失效，还要设置
1、zoom:1; &2、width:100%;
39. IE6背景闪烁的问题
&&&&&&&链接、按钮用CSS sprites作为背景，在ie6下会有背景图闪烁的现象。原因是:IE6没有将背景图缓存，每次触发hover的时候都会重新加载
可以用JavaScript设置ie6缓存这些图片：
document.execCommand(&BackgroundImageCache&,false,true);
40. 出现重复文字的问题
&div&style=&width:400px&&
&&&div&style=&float:left&&&/div&
&&&div&style=&float:width:400px&&↓这就是多出来的那只猪&/div&
1、&&改变结构，不出现【一个容器包含2两个具有“float”样式的子容器】的结构。
2、减小第二个容器的宽度，使父容器宽度减去第二个容器宽度的值大于3
3、去掉所有的注释。
4、修正注释的写法。&!--[if!IE]&这里是注释内容&![endif]--&
5、在第二个容器后面加一个或者多个&divstyle=&clear&&&/div&来解决。
41. ff、chrome绝对定位无效
在IE给td设置position:relative，然后给它包含的一个容器使用position:absolute进行定位是有效的，但在FF和Chrome下却不可以。
设置td的display:block。
42. IE6 绝对定位的问题
&div&style=&position:border:1px solid&text-align:&&
&div&style=&position:top:0;left:0;
background:#CCC;&&dovapour&/div&
&a href=&#& title=&vapour的blog&&内容&/a&
left的定位错误问题
1、给父层设置zoom:1触发layout。
2、给父层设置宽度width
bottom的定位错误问题
1、给父层设置zoom:1触发layout。
2、给父层设置高度height
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的属性已经设置为float:)
这段代码在IE中毫无问题，问题出在其他浏览器中。原因是NOTfloatC并非float标签，必须将float标签闭合。
在&&#div class=”floatB”& &#div class=”NOTfloatC”&之间加上&&#div
class=”clear”&这个div一定要注意位置，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。并且将clear这种样式定义为为如下即可：.clear{
45. 单选框、复选框与后面的文字对不齐
&&&&&单选框、复选框与后面的文字对不齐。
.align{font-size:12}
.align input{ display: float:}
.align label{ display: float:padding-top:3 *padding-top:5}
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：6137次
排名：千里之外
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'
