[分享]css兼容性面试题

CSS兼容性问题在前端开发中是非常常见的一个问题，因为不同的浏览器对CSS的解释和支持程度是不一样的，质量好的CSS在一个浏览器中完美展示，但在另一个浏览器中可能就出现错乱的情况。下面列举一些常见的C...

CSS兼容性问题在前端开发中是非常常见的一个问题，因为不同的浏览器对CSS的解释和支持程度是不一样的，质量好的CSS在一个浏览器中完美展示，但在另一个浏览器中可能就出现错乱的情况。下面列举一些常见的CSS兼容性问题和应对方法。

/*1.盒模型*/
box-sizing 是 CSS3 中新增的一个属性，主要用来改变盒子的模型（即标准盒子模型和IE盒子模型），常用于布局。不同的浏览器对盒模型的解释是不一样的，这就会导致盒子的宽高等样式表现上存在出入。
解决方法：
box-sizing:border-box;//把宽度和高度包含在内
box-sizing:content-box;//默认模式，只把内容宽度和高度包含在内

/*2.浮动*/
当父容器内同时存在浮动元素和非浮动元素时，会导致非浮动元素被顶上去，造成页面错乱。
解决方法：
overflow:hidden;//触发BFC
clear:both;//清除浮动

/*3.z-index*/
z-index 属性用于设置元素的堆叠顺序。不同的浏览器对 z-index 的默认值是不同的，且 IE6 中的 z-index 存在 bug。
解决方法：
尽量避免使用较高的 z-index 值
IE6 下使用 iframe 套嵌解决问题

/*4.行高*/
不同浏览器对于行高的计算方式也是不同的，特别是在 ie6、ie7下。
解决方法：
设置行高与字体大小相等 

以上是 CSS 兼容性问题的一些解决方法，对于每个具体问题请具体分析，最好在实际操作中多做尝试。在实践的过程中不断积累经验，并多向经验丰富的同事或者前辈请教，共同进步。