CSS兼容性问题与解决方案全览

"CSS兼容性问题总结笔记" 这篇笔记主要涵盖了CSS在不同浏览器，特别是IE浏览器中的兼容性问题以及解决方法，包括CSS Hack技术和针对特定浏览器的适配策略。 1. CSS Hack - 直接案例：通过在CSS规则中添加特定符号来针对不同版本的IE进行样式调整，例如，`background-color:white/*非IE浏览器背景白色*/background-color:green\0;/*支持IE9与IE8*/`。 - Hack写法列表：列出了不同符号（\0、\0/、\9、+、_、!important）在不同IE版本中的支持情况，帮助开发者选择合适的Hack方法。 - 在IE7+浏览器中按照IE7文档模式：通过`<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">`或`<meta http-equiv="X-UA-Compatible" content="IE=7">`，可以使IE9和IE8以IE7模式解析页面，确保兼容性。 2. IE下判断IE版本的语句 - 直接案例：未提供具体示例，但通常会使用JavaScript的`navigator.userAgent`属性来检测浏览器类型和版本。 - 语法：未详述，但通常涉及正则表达式匹配用户代理字符串。 - 注意事项：这种方法可能因浏览器更新或伪装而失效，应谨慎使用。 3. 常见CSS兼容性问题及解决方案 - IE6的float元素margin加倍：可以通过清除浮动或设置`display:inline`来解决。 - IE6下图片下方空隙：可以设置`display:block`消除空隙。 - IE6下空标签高度问题：通常与行内元素有关，可转换为块级元素或设置固定高度。 - 层间间隙：可能由于默认的外边距造成，可以使用负margin或重置CSS来修复。 - 子元素浮动后父元素高度问题：使用`overflow:hidden`或`clearfix`类来触发父元素高度计算。 - 超链接访问后hover样式消失：确保链接状态的CSS顺序正确，如`a:link, a:visited, a:hover, a:active`。 - IE6绝对定位1像素间距bug：使用负margin或调整元素大小来修正。 - 省略号显示：利用`text-overflow:ellipsis`和`white-space:nowrap`结合实现。 - UL的padding与margin：需注意浏览器默认样式，可能需要重置。 - IE6最小高度min-height不识别：使用`height`和`_height`配合，或使用`expression`。 - IE6最小宽度min-width不识别：类似min-height，可用`_width`或`expression`。 - IE6居中布局：可以使用`text-align:center`和`margin:0 auto`，或绝对定位。 - IE6 Png图片不透明：使用AlphaImageLoader滤镜或转换为PNG8。 - 移除超链接虚线：设置`text-decoration:none`。 - 隐藏水平滚动条：使用`overflow-x:hidden`。 这些笔记内容对于解决CSS在不同浏览器间的兼容性问题非常实用，尤其是对IE浏览器的优化，对于前端开发者来说是一份宝贵的参考资料。