css兼容性详解资源-CSDN文库

需积分: 9 126 浏览量 2012-07-20 21:41:06 上传评论收藏 42KB DOC 举报

### CSS兼容性详解 #### 一、CSS Hack技术 **CSS Hack**是一种针对不同浏览器或浏览器版本编写特定样式的技巧，以确保网页在各种浏览器下的表现一致。随着浏览器技术的发展，许多Hack方法已经逐渐不再适用。 ##### **1. `!important`** - **概述**：随着Internet Explorer 7（IE7）对`!important`的支持，这种方法主要用于针对IE6的Hack。 - **写法**：需要注意声明的位置，通常将`!important`声明放在前面。 ```css #wrapper { width: 100px !important; /* IE7+ 和 Firefox */ width: 80px; /* IE6 */ } ``` ##### **2. *+html 与 *html*** - **概述**：这两种选择器是IE特有的，Firefox等其他浏览器不支持。其中，`*+html`是IE7特有的标签。 - **示例**： ```css #wrapper { width: 120px; /* Firefox */ *html #wrapper { /* IE6 */ width: 80px; } *+html #wrapper { /* IE7 */ width: 60px; } } ``` - **注意**：使用`*+html` Hack时，HTML文档必须有正确的DOCTYPE声明，例如： ```html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> ``` #### 二、万能浮动闭合 **浮动闭合**是为了解决因元素浮动而导致的布局问题。一种常见的解决方案是使用**clearfix**类。 ##### **CSS 示例**： ```css .clearfix::after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block; } /* 隐藏IE Mac中的内容 */ .clearfix { display: block; } ``` - **原理**：通过添加一个伪元素`::after`，使其清空浮动元素，并且隐藏不可见。 - **用途**：给需要闭合浮动的容器添加`clearfix`类即可。 #### 三、其他兼容技巧 - **FF 下 padding 导致宽高增加**：Firefox 中给`div`设置`padding`可能会导致其宽度和高度增加，而在IE中则不会。可以通过`!important`解决此问题。 - **居中问题** - **垂直居中**：设置`line-height`与`div`高度相同，并使用`vertical-align: middle`。 - **水平居中**：使用`margin: 0 auto`实现水平居中。 - **`a`标签样式**：为了给`a`标签内的内容添加样式，需要设置`display: block`。 - **`float`的 div 在 IE 下 margin 加倍**：IE 中存在`float`的`div`在某些情况下`margin`加倍的问题。 - **`ul`标签默认样式**：在Firefox中，`ul`标签默认有`list-style`和`padding`，需要重置这些样式以避免不必要的麻烦。 - **外部 wrapper 的高度**：作为外部包裹层的`div`不要固定高度，最好加上`overflow: hidden`以实现高度自适应。 - **光标样式**：使用`cursor: pointer`而不是仅适用于IE的`hand`。 #### 四、针对不同浏览器的CSS样式 ##### **1. 针对 Firefox、IE6 和 IE7 的样式** - **示例**： ```css #example { color: #333; /* Firefox */ *html #example { /* IE6 */ color: #666; } *+html #example { /* IE7 */ color: #999; } } ``` ##### **2. 布局中的居中问题** - **CSS 示例**： ```css body { text-align: center; } #center { margin-right: auto; margin-left: auto; } ``` - **说明**： - 在父元素上定义`text-align: center;`可以让内容居中。 - 对于IE，这样就足够了；但在Mozilla中还需要在子元素上设置`margin-right: auto;`和`margin-left: auto;`。通过以上介绍的方法和技术，开发者可以有效地解决CSS在不同浏览器间的兼容性问题，确保网站在各种环境中都能提供良好的用户体验。

资源推荐

资源详情

资源评论