div+CSS 兼容小摘

### div+CSS兼容小摘知识点详解 #### 一、背景色选择器的浏览器兼容性处理 在CSS中，可以通过特定的语法来实现不同浏览器下的背景色兼容性处理。以下是一些常用的技巧： - **区别IE6与FF**： ```css background: orange; /* 所有浏览器 */ *background: blue; /* IE6 */ ``` 这里通过普通声明定义了所有浏览器（包括IE6）的背景色为橙色，而通过 `*` 通配符选择器定义了仅IE6的背景色为蓝色。 - **区别IE6与IE7**： ```css background: green !important; /* FF, IE7 */ background: blue; /* IE6 */ ``` 这里通过 `!important` 提高了声明的优先级，使得Firefox和IE7显示绿色背景，而IE6则显示蓝色背景。 - **区别IE7与FF**： ```css background: orange; /* 所有浏览器 */ *background: green; /* IE7 */ ``` 使用 `*` 通配符选择器定义了仅IE7的背景色为绿色，其他浏览器（包括Firefox）显示橙色背景。 - **区别FF、IE7、IE6**： ```css background: orange; /* 所有浏览器 */ *background: green !important; /* IE7 */ *background: blue; /* IE6 */ ``` 在这里，通过多重声明实现了不同浏览器间的背景色兼容。IE7会显示绿色背景，IE6显示蓝色背景，其他浏览器则显示橙色背景。 - **IE7、IE8兼容性设置**： ```html <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> ``` 此元标签告诉IE7和IE8以IE7的标准模式渲染页面，确保兼容性。 #### 二、浏览器特性的CSS支持 - **CSS中的浏览器兼容性重复定义**： - `!important` 可被FireFox和IE7识别。 - `*` 可被IE6、IE7识别。 - `_` 可被IE6识别。 - `*+` 可被IE7识别。 - **IE专用的条件注释**： ```html <!--[if IE7]> <link rel="stylesheet" type="text/css" href="ie7.css" /> <![endif]--> <!--[if lte IE6]> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]--> ``` 上述代码段使用了IE特有的条件注释，可以针对性地加载不同的CSS文件来解决IE7和IE6及其以下版本的兼容性问题。 #### 三、浏览器对实际像素的解释差异 - **IE/Opera**：对象的实际宽度 = (margin-left) + width + (margin-right)。 - **Firefox/Mozilla**：对象的实际宽度 = (margin-left) + (border-left-width) + (padding-left) + width + (padding-right) + (border-right-width) + (margin-right)。 #### 四、鼠标手势支持 - **FireFox** 的 `cursor` 属性不支持 `hand`，但支持 `pointer`；**IE** 支持 `hand` 和 `pointer`。因此，为了兼容，推荐使用 `pointer`。 #### 五、元素尺寸单位的使用 - 在FireFox中设置HTML标签的Style属性时，所有位置、宽高和尺寸值必须后跟 `px`，IE也支持此写法。例如： ```javascript Obj.Style.Height = imgObj.Style.Height + 'px'; ``` #### 六、简写属性的兼容性处理 - **FireFox** 无法解析简写的 `padding` 属性设置，如 `padding: 5px 4px 3px 1px`。必须改为分别设置四个方向的 `padding`，例如： ```css padding-top: 5px; padding-right: 4px; padding-bottom: 3px; padding-left: 1px; ``` #### 七、消除列表缩进的兼容性处理 - 消除 `ul`、`ol` 等列表的缩进时，样式应写成 `list-style: none; margin: 0px; padding: 0px;`。其中，`margin` 属性对IE有效，而 `padding` 属性对Firefox有效。 #### 八、CSS透明度控制 - **IE**：`filter: progid:DXImageTransform.Microsoft.Alpha(style=0, opacity=60);` - **Firefox**：`opacity: 0.6;` #### 九、CSS圆角支持 - **IE** 不支持圆角。 - **Firefox** 支持 `-moz-border-radius` 属性。 #### 十、CSS双线凹凸边框 - **IE**：`border: 2px outset;` - **Firefox**： ```css -moz-border-top-colors: #d4d0c8 white; -moz-border-left-colors: #d4d0c8 white; -moz-border-right-colors: #404040 #808080; -moz-border-bottom-colors: #404040 #808080; ``` #### 十一、光标样式文件与滚动条颜色的支持 - **IE** 支持 `cursor: url()` 自定义光标样式文件和滚动条颜色风格；**Firefox** 对这两者均不支持。 #### 十二、Select 控件的问题 - **IE** 存在 Select 控件永远处于最上层的 bug，并且所有 CSS 对 Select 控件都不起作用。 #### 十三、Label 标签的支持 - **IE** 支持 Form 中的 Label 标签，包括图片和文字内容；**Firefox** 不支持包含图片的 Label，点击图片不能让标记 `label for` 的 Radio 或 CheckBox 产生效果。 #### 总结 div+CSS 是前端开发中非常重要的技术之一，尤其是在多浏览器兼容性方面。通过对上述各项技术点的理解和应用，开发者能够更好地构建出兼容各种浏览器的网页。这些技巧不仅有助于提高网站的用户体验，还能帮助开发者节省大量的调试时间，从而提升开发效率。希望上述总结能为您的前端开发之路提供一定的参考和帮助。