CSS收集

blockquote效果

代码

1
2
3
4
5
6
7

blockquote {
  margin:22px 40px;
  upadding:3px;
  color:#575757;
  padding: 0 50px;
  background: transparent url("images/blockquote.gif") no-repeat 0 0;
}

效果

blockquote.gif下载
查看原文

高度自适应：（IE6、7，Firefox3，Safari3、opera9.6）

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.clearfix:after { 
 content: "."; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden; 
}
* html > body .clearfix { display: inline-block; width: 100%; }
.autoHeight{
height: auto !important;
_zoom:1;/*For IE6、7*/
}
用法：
<div class="autoHeight clearfix">高度自适应容器</div>

在IE中可能由于注释带来的文字重复问题时可以把注释改为：



<!--[if !IE]&gt;注释请写到这里，注释是英文的话就不会出现这种情况。&lt;![endif]-->

简单的浏览器兼容方案

1
2
3
4
5
6
7
8
9
10
11
12
13
14

区别IE6与FF：
       background:orange;*background:blue;


区别IE6与IE7：
       background:green !important;background:blue;


区别IE7与FF：
       background:orange; *background:green;


区别FF，IE7，IE6：
       background:orange;*background:green !important;*background:blue;

注：IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;

于是大家还可以这样来区分IE6，IE7，firefox
background:orange;*background:green;_background:blue;

注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。

容器垂直居中

@如果高度不固定的话 直接padding:20px; 就可以了

@如果是高度高度的话 :(vertical-align属性只会对拥有valign特性的(X)HTML标签起作用)

在CSS中有一个display属性能够模拟

，所以我们可以使用这个属性来让
模拟
就可以使用vertical-align了。注意，display:table和display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个
元素：

1
2
3
4
5
6
7
8
9
10
11

div#wrap {   
    height:400px;   
 display:table;   
}   
div#content {   
  vertical-align:middle;   
    display:table-cell;   
   border:1px solid #FF0099;   
 background-color:#FFCCFF;   
 width:760px;   
}

不幸的是Internet Explorer 6 并不能正确地理解display:table和display:table-cell，因此这种方法在Internet Explorer 6及以下的版本中是无效的
解决方案：

在Internet Explorer 6及以下版本中，在高度的计算上存在着缺陷的。在Internet Explorer 6中对父元素进行定位后，如果再对子元素进行百分比计算时，计算的基础似乎是有继承性的（如果定位的数值是绝对数值没有这个问题，但是使用百分比计算的基础将不再是该元素的高度，而从父元素继承来的定位高度）。例如，我们有下面这样一个(X)HTML代码段：

1
2
3
4
5
6

<div id="wrap">  
 <div id="subwrap">  
   <div id="content">
 </div>  
</div>  
</div>

如果我们对subwrap进行了绝对定位，那么content也会继承了这个这个属性，虽然它不会在页面中马上显示出来，但是如果再对content进行相对定位的时候，你使用的100分比将不再是content原有的高度。例如，我们设定了subwrap的position为40，我们如果想使content的上边缘和wrap重合的话就必须设置top:-80;那么，如果我们设定subwrap的top:50的话，我们必须使用100才能使content回到原来的位置上去，但是如果我们把content也设置50呢？那么它就正好垂直居中了。所以我们可以使用这中方法来实现Internet Explorer 6中的垂直居中

完美的解决方案：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

div#wrap {   
        display:table;   
        border:1px solid #FF0099;   
        background-color:#FFCCFF;   
        width:760px;   
        height:400px;   
        _position:relative;   
        overflow:hidden;   
}   
div#subwrap {   
        vertical-align:middle;   
        display:table-cell;   
        _position:absolute;   
        _top:50%;   
}   
div#content {   
        _position:relative;   
        _top:-50%;   
}

Wiki首页 | 查看所有 | 编辑 | 输出到博客 | 历史版本