2023年6月21日发(作者：)
Web前端⾯试题第三道—浏览器的兼容性所谓的浏览器兼容性问题，是指因为不同的浏览器对同⼀段代码有不同的解析，造成页⾯显⽰效果不统⼀的情况。在⼤多数情况下，我们的需求是，⽆论⽤户⽤什么浏览器来查看我们的⽹站或者登陆我们的系统，都应该是统⼀的显⽰效果。所以浏览器的兼容性问题是前端开发⼈员经常会碰到和必须要解决的问题。总结之后将经常遇到的浏览器的兼容性问题分为以下九种，其它不常见的关于JS、CSS的兼容性⼩问题太多，就不再⼀⼀罗列，有兴趣可以去⽹上找找，有很多，如果实在没法解决的情况下可以⽤CSS hack解决，如果有其他⽅法解决兼容性，尽可能减少对CSS Hack的使⽤。Hack有风险，使⽤需谨慎。常见的兼容性问题及解决办法⼀、不同浏览器的标签默认的外补丁和内补丁不同问题表现：随便写⼏个标签，不加样式控制的情况下，各⾃的margin 和padding差异较⼤。解决⽅案：CSS⾥ *{margin:0;padding:0;}备注：这个是最常见的也是最易解决的⼀个浏览器兼容性问题，⼏乎所有的CSS⽂件开头都会⽤通配符*来设置各个标签的内外补丁是0。⼆、块属性标签float后，⼜有横向的margin情况下，在IE6显⽰margin⽐设置的⼤问题表现：IE6后⾯的⼀块被顶到下⼀⾏解决⽅案：在float的标签样式控制中加⼊display:inline;转化为⾏内属性备注：横向浮动的div布局，使⽤上margin进⾏边界设置时，必然会碰到此问题三、设置较⼩⾼度标签(⼀般⼩于10px)，在IE6、IE7，遨游中⾼度超出设置⾼度值问题表现：IE6、7和遨游⾥这个标签的⾼度不受控制，超出⾃⼰设置的⾼度解决⽅案：给超出⾼度的标签设置overflow:hidden;或者设置⾏⾼line-height⼩于你设置的⾼度备注：⼀般出现在设置⼩圆⾓背景的标签⾥。出现该问题原因是IE8之前的浏览器都会给标签⼀个最⼩默认⾏⾼的⾼度，即使标签是空内容，标签的⾼度还是会有默认⾏⾼。四、⾏内属性标签，设置display:block后采⽤float布局，⼜有横向的margin情况，IE6间距bug问题表现：IE6的间距⽐超过设置的间距解决⽅案：在display:block;后⾯加⼊display:inline;display:table;备注：⾏内属性标签，为了设置宽度，需要设置为display:block;(表单元素除外)在⽤float布局且有横向margin后，在IE6下，就具有了块属性float后的横向margin的bug。由于设置为display:inline，⾼度失效，所有在后⾯补上display:table。五、图⽚默认有间距问题表现：⼏个img标签放在⼀块，有些浏览器会有默认的间距，有通配符也不起作⽤解决⽅案：使⽤float属性为img布局备注：img标签是⾏内属性标签，只要不超出容器⾼度，img会排在⼀⾏⾥，使⽤float是⽐较好的选择六、标签最低⾼度设置min-height不兼容问题表现：min-height本⾝就是⼀个不兼容的css属性，所以设置min-height时不能兼容所有浏览器解决⽅案：如果设置⼀个标签最⼩⾼度为200px，需要进⾏设置 {min-height:200px; height:auto !important;height: 200px; overflow:visible;}备注：b/s系统前端时，当内容⼩于⼀个值时，容器的⾼度保持该值，当内容⼤于该值时，⾼度⾃适应且不出现滚动条。七、光标⼿形问题表现：firefox不⽀持hand，但ie⽀持pointer解决⽅案：统⼀使⽤cursor:pointer;⼋、字体⼤⼩定义不同问题表现：对字体⼤⼩small定义不同，Firefox为13px，⽽IE为16px，差别⽐较⼤解决⽅法：使⽤指定的字体⼤⼩如14px或者使⽤em九、IE6 3px bug问题表现：左侧div浮动left，右边DIV可以接着横向排列，形成典型⼀列固定，第⼆列⾃适应，IE6出现之间3px间隙解决⽅法：对左侧left的盒⼦补上_margin-right: -3px;⼗、其它⽅⾯如果要减少浏览器兼容性问题的出现，可以分两种情况：第⼀种是企业内部系统：通常会采⽤⼀些现成的UI技术，如ext、flex或其它UI框架完成。这些技术⾃⼰已经有相当好的浏览器兼容了。第⼆种是互联⽹的：通常也会采⽤⼀些JS框架作辅助，如jQuery等作对dom、事件、ajax的兼容，页⾯上使⽤hack技术，如IE的*开始的选择器和条件注释作兼容。css hack先举⼀个⼩例⼦，简要说明⼀下CSS hack是⼲啥的。⽐如要分辨IE6和firefox两种浏览器，可以这样写：div{background:green;/*forfirefox*/*background:red;/*forIE6*/(bothIE6&&IE7)}我在IE6中看到是红⾊的，在firefox中看到是绿⾊的。解释⼀下：上⾯的css在firefox中，它是认识不了后⾯的那个带星号的东西是什么的，于是将它过滤掉，不予理睬，解析得到的结果是:div{background:green},于是理所当然这个div的背景是绿⾊的。在IE6中呢，它两个background都能识别出来，它解析得到的结果是:div{background:green;*background:red;},于是根据优先级别，处在后⾯的red的优先级⾼，于是当然这个div的背景颜⾊就是红⾊的了。css hack就是通过这种⽅式来对浏览器进⾏兼容性处理。也就是通过在CSS样式中加⼊⼀些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应⽤不同的CSS样式的⽬的。因此我们就可以根据不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页⾯效果。针对不同浏览器的⽹站设计代码总结如下1、针对I E 系列浏览器的⽹站设计代码
针对 IE 6 的专属 CSS Hack ⽹站设计代码 #id{ _display: block; } 也就是在⽹站设计CSS属性前加⼀个⼩划线就好。
针对 IE 7 的专属 CSS Hack ⽹站设计代码 #id{ *display: block; } 即在⽹站设计CSS属性前加上⼀个星号。 针对 IE 8 的专属 CSS Hack ⽹站设计代码 #id{ margin-top: 10px /9; /*IE8*/} 如上所⽰，解决办法为在⽹站设计CSS属性后分号前加上空格与斜线并加⼊⼀个数字9即可 。2、针对⽕狐的CSS Hack ⽹站设计代码
想要解决⽕狐的兼容性只要将CSS代码写⼊到 @-moz-document url-prefix（）{ } ⾥⾯就⾏了 , 例如 @-moz-document url-prefix() {
#id{ display: block; } } 。3、针对 Safari 的CSS Hack ⽹站设计代码
Safari是苹果中新的浏览器，解决兼容性的做法是加上@media screen and (-webkit-min-device-pixel-ratio:0)前缀。例如@media screenand (-webkit-min-device-pixel-ratio:0) { #id { display: block; } } 兼容性做法和⽕狐相近。4、针对 Opera 的CSS Hack ⽹站设计代码Opera解决兼容性的做法也是加上选择器前缀，例如 @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body #id { display: block; } } 这个世界上必然不会存在绝对完美的事物，因此运⽤以上⽅法让我们的⽹站设计更好的与各种浏览器兼容的时候其实已经违反了⽹站制作的W3C标准。
2023年6月21日发(作者：)
Web前端⾯试题第三道—浏览器的兼容性所谓的浏览器兼容性问题，是指因为不同的浏览器对同⼀段代码有不同的解析，造成页⾯显⽰效果不统⼀的情况。在⼤多数情况下，我们的需求是，⽆论⽤户⽤什么浏览器来查看我们的⽹站或者登陆我们的系统，都应该是统⼀的显⽰效果。所以浏览器的兼容性问题是前端开发⼈员经常会碰到和必须要解决的问题。总结之后将经常遇到的浏览器的兼容性问题分为以下九种，其它不常见的关于JS、CSS的兼容性⼩问题太多，就不再⼀⼀罗列，有兴趣可以去⽹上找找，有很多，如果实在没法解决的情况下可以⽤CSS hack解决，如果有其他⽅法解决兼容性，尽可能减少对CSS Hack的使⽤。Hack有风险，使⽤需谨慎。常见的兼容性问题及解决办法⼀、不同浏览器的标签默认的外补丁和内补丁不同问题表现：随便写⼏个标签，不加样式控制的情况下，各⾃的margin 和padding差异较⼤。解决⽅案：CSS⾥ *{margin:0;padding:0;}备注：这个是最常见的也是最易解决的⼀个浏览器兼容性问题，⼏乎所有的CSS⽂件开头都会⽤通配符*来设置各个标签的内外补丁是0。⼆、块属性标签float后，⼜有横向的margin情况下，在IE6显⽰margin⽐设置的⼤问题表现：IE6后⾯的⼀块被顶到下⼀⾏解决⽅案：在float的标签样式控制中加⼊display:inline;转化为⾏内属性备注：横向浮动的div布局，使⽤上margin进⾏边界设置时，必然会碰到此问题三、设置较⼩⾼度标签(⼀般⼩于10px)，在IE6、IE7，遨游中⾼度超出设置⾼度值问题表现：IE6、7和遨游⾥这个标签的⾼度不受控制，超出⾃⼰设置的⾼度解决⽅案：给超出⾼度的标签设置overflow:hidden;或者设置⾏⾼line-height⼩于你设置的⾼度备注：⼀般出现在设置⼩圆⾓背景的标签⾥。出现该问题原因是IE8之前的浏览器都会给标签⼀个最⼩默认⾏⾼的⾼度，即使标签是空内容，标签的⾼度还是会有默认⾏⾼。四、⾏内属性标签，设置display:block后采⽤float布局，⼜有横向的margin情况，IE6间距bug问题表现：IE6的间距⽐超过设置的间距解决⽅案：在display:block;后⾯加⼊display:inline;display:table;备注：⾏内属性标签，为了设置宽度，需要设置为display:block;(表单元素除外)在⽤float布局且有横向margin后，在IE6下，就具有了块属性float后的横向margin的bug。由于设置为display:inline，⾼度失效，所有在后⾯补上display:table。五、图⽚默认有间距问题表现：⼏个img标签放在⼀块，有些浏览器会有默认的间距，有通配符也不起作⽤解决⽅案：使⽤float属性为img布局备注：img标签是⾏内属性标签，只要不超出容器⾼度，img会排在⼀⾏⾥，使⽤float是⽐较好的选择六、标签最低⾼度设置min-height不兼容问题表现：min-height本⾝就是⼀个不兼容的css属性，所以设置min-height时不能兼容所有浏览器解决⽅案：如果设置⼀个标签最⼩⾼度为200px，需要进⾏设置 {min-height:200px; height:auto !important;height: 200px; overflow:visible;}备注：b/s系统前端时，当内容⼩于⼀个值时，容器的⾼度保持该值，当内容⼤于该值时，⾼度⾃适应且不出现滚动条。七、光标⼿形问题表现：firefox不⽀持hand，但ie⽀持pointer解决⽅案：统⼀使⽤cursor:pointer;⼋、字体⼤⼩定义不同问题表现：对字体⼤⼩small定义不同，Firefox为13px，⽽IE为16px，差别⽐较⼤解决⽅法：使⽤指定的字体⼤⼩如14px或者使⽤em九、IE6 3px bug问题表现：左侧div浮动left，右边DIV可以接着横向排列，形成典型⼀列固定，第⼆列⾃适应，IE6出现之间3px间隙解决⽅法：对左侧left的盒⼦补上_margin-right: -3px;⼗、其它⽅⾯如果要减少浏览器兼容性问题的出现，可以分两种情况：第⼀种是企业内部系统：通常会采⽤⼀些现成的UI技术，如ext、flex或其它UI框架完成。这些技术⾃⼰已经有相当好的浏览器兼容了。第⼆种是互联⽹的：通常也会采⽤⼀些JS框架作辅助，如jQuery等作对dom、事件、ajax的兼容，页⾯上使⽤hack技术，如IE的*开始的选择器和条件注释作兼容。css hack先举⼀个⼩例⼦，简要说明⼀下CSS hack是⼲啥的。⽐如要分辨IE6和firefox两种浏览器，可以这样写：div{background:green;/*forfirefox*/*background:red;/*forIE6*/(bothIE6&&IE7)}我在IE6中看到是红⾊的，在firefox中看到是绿⾊的。解释⼀下：上⾯的css在firefox中，它是认识不了后⾯的那个带星号的东西是什么的，于是将它过滤掉，不予理睬，解析得到的结果是:div{background:green},于是理所当然这个div的背景是绿⾊的。在IE6中呢，它两个background都能识别出来，它解析得到的结果是:div{background:green;*background:red;},于是根据优先级别，处在后⾯的red的优先级⾼，于是当然这个div的背景颜⾊就是红⾊的了。css hack就是通过这种⽅式来对浏览器进⾏兼容性处理。也就是通过在CSS样式中加⼊⼀些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应⽤不同的CSS样式的⽬的。因此我们就可以根据不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页⾯效果。针对不同浏览器的⽹站设计代码总结如下1、针对I E 系列浏览器的⽹站设计代码
针对 IE 6 的专属 CSS Hack ⽹站设计代码 #id{ _display: block; } 也就是在⽹站设计CSS属性前加⼀个⼩划线就好。
针对 IE 7 的专属 CSS Hack ⽹站设计代码 #id{ *display: block; } 即在⽹站设计CSS属性前加上⼀个星号。 针对 IE 8 的专属 CSS Hack ⽹站设计代码 #id{ margin-top: 10px /9; /*IE8*/} 如上所⽰，解决办法为在⽹站设计CSS属性后分号前加上空格与斜线并加⼊⼀个数字9即可 。2、针对⽕狐的CSS Hack ⽹站设计代码
想要解决⽕狐的兼容性只要将CSS代码写⼊到 @-moz-document url-prefix（）{ } ⾥⾯就⾏了 , 例如 @-moz-document url-prefix() {
#id{ display: block; } } 。3、针对 Safari 的CSS Hack ⽹站设计代码
Safari是苹果中新的浏览器，解决兼容性的做法是加上@media screen and (-webkit-min-device-pixel-ratio:0)前缀。例如@media screenand (-webkit-min-device-pixel-ratio:0) { #id { display: block; } } 兼容性做法和⽕狐相近。4、针对 Opera 的CSS Hack ⽹站设计代码Opera解决兼容性的做法也是加上选择器前缀，例如 @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body #id { display: block; } } 这个世界上必然不会存在绝对完美的事物，因此运⽤以上⽅法让我们的⽹站设计更好的与各种浏览器兼容的时候其实已经违反了⽹站制作的W3C标准。
发布评论