2023年6月21日发(作者：)
Web前端浏览器兼容性问题及解决⽅案常见的兼容性问题：1、不同浏览器的标签默认的外边距( margin )和内边距(padding)不同解决⽅案： css ⾥增加通配符 * { margin: 0; padding: 0; }2、IE6双边距问题；在 IE6中设置了float , 同时⼜设置margin , 就会出现边距问题解决⽅案：设置display:inline;3、当标签的⾼度设置⼩于10px，在IE6、IE7中会超出⾃⼰设置的⾼度解决⽅案：超出⾼度的标签设置overflow:hidden,或者设置line-height的值⼩于你的设置⾼度4、图⽚默认有间距解决⽅案：使⽤float 为img 布局5、IE9⼀下浏览器不能使⽤opacity解决⽅案：opacity: 0.5;filter: alpha(opacity = 50);filter: progid:(style = 0, opacity = 50);6、边距重叠问题；当相邻两个元素都设置了margin 边距时，margin 将取最⼤值，舍弃最⼩值；解决⽅案：为了不让边重叠，可以给⼦元素增加⼀个⽗级元素，并设置⽗级元素为overflow:hidden；7、cursor:hand 显⽰⼿型在safari 上不⽀持解决⽅案：统⼀使⽤ cursor:pointer8、两个块级元素，⽗元素设置了overflow:auto；⼦元素设置了position:relative ;且⾼度⼤于⽗元素，在IE6、IE7会被隐藏⽽不是溢出；解决⽅案：⽗级元素设置position:relative技巧⼀：css hack使⽤hack 我可以把浏览器分为3类：ie6 ；ie7和遨游；其他（ie8 chrome ff safari opera等）ie6认识的hack 是下划线_ 和星号 *ie7 遨游认识的hack是星号 * （包括上⾯问题6中的 !important也算是hack的⼀种。不过实⽤性较⼩。） ⽐如这样⼀个css设置 height:300px;*height:200px;_height:100px;ie6浏览器在读到 height:300px的时候会认为⾼时300px；继续往下读，他也认识*heihgt， 所以当ie6读到*height:200px的时候会覆盖掉前⼀条的相冲突设置，认为⾼度是200px。继续往下读，ie6还认识_height,所以他⼜会覆盖掉200px⾼的设置，把⾼度设置为100px；ie7和遨游也是⼀样的从⾼度300px的设置往下读。当它们读到*height200px的时候就停下了，因为它们不认识_height。所以它们会把⾼度解析为200px；剩下的浏览器只认识第⼀个height:300px;所以他们会把⾼度解析为300px。因为优先级相同且相冲突的属性设置后⼀个会覆盖掉前⼀个，所以书写的次序是很重要的。/* CSS属性级Hack */
color:red; /* 所有浏览器可识别*/_color:red; /* 仅IE6 识别 */*color:red; /* IE6、IE7 识别 */+color:red; /* IE6、IE7 识别 */*+color:red; /* IE6、IE7 识别 */[color:red; /* IE6、IE7 识别 */color:red9; /* IE6、IE7、IE8、IE9 识别 */color:red0; /* IE8、IE9 识别*/color:red90; /* 仅IE9识别 */color:red 0; /* 仅IE9识别 */color:red!important; /* IE6 不识别!important 有危险*//* CSS选择符级Hack */
*html #demo { color:red;} /* 仅IE6 识别 */*+html #demo { color:red;} /* 仅IE7 识别 */body:nth-of-type(1) #demo { color:red;} /* IE9+、FF3.5+、Chrome、Safari、Opera 可以识别 */
head:first-child+body #demo { color:red; } /* IE7+、FF、Chrome、Safari、Opera 可以识别 */:root #demo { color:red9; } : /* 仅IE9识别 */越少的浮动，就会越少的代码，会有更灵活的页⾯，会有扩展性更强的页⾯。CSS属性前缀语义化：使⽤Trident内核的浏览器：IE、Maxthon、TT；使⽤Gecko内核的浏览器：Netcape6及以上版本、FireFox；使⽤Presto内核的浏览器：Opera7及以上版本；使⽤Webkit内核的浏览器：Safari、Chrome。
2023年6月21日发(作者：)
Web前端浏览器兼容性问题及解决⽅案常见的兼容性问题：1、不同浏览器的标签默认的外边距( margin )和内边距(padding)不同解决⽅案： css ⾥增加通配符 * { margin: 0; padding: 0; }2、IE6双边距问题；在 IE6中设置了float , 同时⼜设置margin , 就会出现边距问题解决⽅案：设置display:inline;3、当标签的⾼度设置⼩于10px，在IE6、IE7中会超出⾃⼰设置的⾼度解决⽅案：超出⾼度的标签设置overflow:hidden,或者设置line-height的值⼩于你的设置⾼度4、图⽚默认有间距解决⽅案：使⽤float 为img 布局5、IE9⼀下浏览器不能使⽤opacity解决⽅案：opacity: 0.5;filter: alpha(opacity = 50);filter: progid:(style = 0, opacity = 50);6、边距重叠问题；当相邻两个元素都设置了margin 边距时，margin 将取最⼤值，舍弃最⼩值；解决⽅案：为了不让边重叠，可以给⼦元素增加⼀个⽗级元素，并设置⽗级元素为overflow:hidden；7、cursor:hand 显⽰⼿型在safari 上不⽀持解决⽅案：统⼀使⽤ cursor:pointer8、两个块级元素，⽗元素设置了overflow:auto；⼦元素设置了position:relative ;且⾼度⼤于⽗元素，在IE6、IE7会被隐藏⽽不是溢出；解决⽅案：⽗级元素设置position:relative技巧⼀：css hack使⽤hack 我可以把浏览器分为3类：ie6 ；ie7和遨游；其他（ie8 chrome ff safari opera等）ie6认识的hack 是下划线_ 和星号 *ie7 遨游认识的hack是星号 * （包括上⾯问题6中的 !important也算是hack的⼀种。不过实⽤性较⼩。） ⽐如这样⼀个css设置 height:300px;*height:200px;_height:100px;ie6浏览器在读到 height:300px的时候会认为⾼时300px；继续往下读，他也认识*heihgt， 所以当ie6读到*height:200px的时候会覆盖掉前⼀条的相冲突设置，认为⾼度是200px。继续往下读，ie6还认识_height,所以他⼜会覆盖掉200px⾼的设置，把⾼度设置为100px；ie7和遨游也是⼀样的从⾼度300px的设置往下读。当它们读到*height200px的时候就停下了，因为它们不认识_height。所以它们会把⾼度解析为200px；剩下的浏览器只认识第⼀个height:300px;所以他们会把⾼度解析为300px。因为优先级相同且相冲突的属性设置后⼀个会覆盖掉前⼀个，所以书写的次序是很重要的。/* CSS属性级Hack */
color:red; /* 所有浏览器可识别*/_color:red; /* 仅IE6 识别 */*color:red; /* IE6、IE7 识别 */+color:red; /* IE6、IE7 识别 */*+color:red; /* IE6、IE7 识别 */[color:red; /* IE6、IE7 识别 */color:red9; /* IE6、IE7、IE8、IE9 识别 */color:red0; /* IE8、IE9 识别*/color:red90; /* 仅IE9识别 */color:red 0; /* 仅IE9识别 */color:red!important; /* IE6 不识别!important 有危险*//* CSS选择符级Hack */
*html #demo { color:red;} /* 仅IE6 识别 */*+html #demo { color:red;} /* 仅IE7 识别 */body:nth-of-type(1) #demo { color:red;} /* IE9+、FF3.5+、Chrome、Safari、Opera 可以识别 */
head:first-child+body #demo { color:red; } /* IE7+、FF、Chrome、Safari、Opera 可以识别 */:root #demo { color:red9; } : /* 仅IE9识别 */越少的浮动，就会越少的代码，会有更灵活的页⾯，会有扩展性更强的页⾯。CSS属性前缀语义化：使⽤Trident内核的浏览器：IE、Maxthon、TT；使⽤Gecko内核的浏览器：Netcape6及以上版本、FireFox；使⽤Presto内核的浏览器：Opera7及以上版本；使⽤Webkit内核的浏览器：Safari、Chrome。
发布评论