浏览器兼容前端面试题,前端面试题兼容性问题

兼容问题一般都是面试必问问题，今天搞明白！！！ 浏览器兼容问题一：不同浏览器的标签默认间距不同出现问题：当我们布局的时候，在不加样式控制的情况下，各自默认的margin和padding差异较大。解决方案： 在css开头中使用通配符*，设置各个标签的margin和padding值为0，就可以了。 浏览器兼容问题二：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。出现问题：常见症状是IE6中后面的一块被顶到下一行。解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性。备注：我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。 浏览器兼容问题三：图片默认间距问题出现问题：几个img标签放在一起的时候，有些浏览器会有默认的间距，通配符清除间距也不起作用。解决方案：使用float属性为img布局备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。（也可使用负margin，虽然能解决，但负margin本身就是容易引起浏览器兼容问题的用法，所以尽量不要使用） 浏览器兼容问题四：变迁最低高度设置min-height不兼容出现问题：因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}备注：在B/S系统前端开发时，有很多情况下我们有这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。 兼容问题五：innerText的问题问题：innerText 在IE中能正常工作，但是innerText 在FireFox中却不行解决方法：在非IE浏览器中使用textContent代替innerText。 兼容问题六：超链接点击过后hover样式就不出现的问题？被点击访问过的超链接样式不再具有hover和active样式了,解决方法是改变CSS属性的排列顺序: L-V-H-A a:link {} a:visited {} a:hover {} a:active {}