解决CSS兼容性问题归总

/* CSS Document */
/* 全局样式 */
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}
/*灵活地运用h2等标题的应用，但一定要margin:0;否侧会产生空白*/
body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"宋体";}

ul,ol{list-style-type:none;}
select,input,img,select{vertical-align:middle;}/*目的在于表单中提交按钮和文字域和文字在同一水平线，否则当提交按钮为图片是不在同一水平线上*/

a{text-decoration:underline;}
a:link{color:#009;}
a:visited{color:#800080;}
a:hover,a:active,a:focus{color:#c00;}

.clearit{clear:both;}

/*去掉链接虚框*/
:focus { outline: none; }/*针对Firfox*/
a,area { blr:expression(this.onFocus=this.blur()) }/*/针对IE*/

/* page */
#page{width:950px; overflow: visible; _display:inline-block; margin:0 auto;}/*overflow: visible;表示显示，hidden表示隐藏,这是新浪网的*/
#container { width:950px; text-align:center; margin:0 auto;}/*这是凤凰网的*/

/*================================== 常用链接 begin=============================== */
a.linkRed:link,a.linkRed:visited{color:#f00!important; color:#0000FF;}/* 红色 */
a.linkRed:hover{color:#c00!important;}
a.linkBlack:link,a.linkBlack:visited{color:#000!important;}/* 黑色 */
a.linkBlack:hover{color:#f00!important;}
a.linkWhite:link,a.linkWhite:visited{color:#fff!important;}/* 白色 */
a.linkWhite:hover{color:#f00!important;}
a.linkGray:link,a.linkGray:visited{color:#5d5d5d!important;}/* 灰色 */
a.linkGray:hover{color:#f00!important;}
a.linkCyan:link,a.linkCyan:visited{color:#92e4fa!important;text-decoration:underline;}/* 青色 */

/*===========================解决段落间距和段落首行缩进==================================*/
p{
text-indent:2em;/*空2个字的距离，em是以当前字号大小为单位*/
margin:0px;
padding:0px;
margin-bottom:15px;
}/*注意一定要加上margin和padding都为0，否则不起作用*/

/*=======================================新闻列表实现=================================*/
.news_list ul li span{
float: right;/*使span元素浮动到右面*/
text-align: right;/*日期右对齐*/
}
/*内容超长时用省略号代替*/
#new1{
width:200px;
overflow:hidden;/*超过宽度不显示*/
text-overflow:ellipsis;/*内容超长时用省略号代替*/
white-space:nowrap;/*强制内容在一行显示*/
border:1px #f00 double;
}

form{
margin:0;padding:0;/*解决表单下面空行或有空间的问题*/
}

/*=================================解决新闻列表默认空两格和项目符号不显示的问题==============================*/

ul{margin:0;padding:0;list-type:square inside;}/*square表示实心方块，disc表示实心圆即默认值，注意：inside表示项目符号在在文本内，默认是在outside在文本外，即在ul的外边，这样将不会显示列表符号，因为：margin我们设为0了;list-tyle-type:项目符号类型（disc实心圆,circle空心圆,square实心方块,none无;list-style-position:位置（outside和inside;)*/

/*===============无图片圆角矩形的实现方法(局限于单色)======================*/
/*开始定义*/
#layout{width:300px;height:200px;background: #9BD1FA;/*矩形内部色*/}
.rtop, .rbottom{}
.rtop div, .rbottom div{display:block;height: 1px;overflow: hidden; background: #9BD1FA}/*块rtop,rbottom内的元素高度都为1px,超出隐藏*/
.r1{margin: 0 5px}
.r2{margin: 0 3px}     /*注意边距为5px,3px,2px,1px,r4高度为2px,目的为是呈现平滑的圆角效果*/
.r3{margin: 0 2px}
.r4{margin: 0 1px;height: 2px}
.middle{border:1px #9bd1fa solid;boackground:#f00;}/*设置里面边框和背景色*/
/*应用样式*/
/*==========
<div id="lyaout">
     <div class="rtop">
       <div class="r1"></div>
    <div class="r2"></div>
    <div class="r3"></div>
    <div class="r4"></div>
  </div>
 <div class="middle">
<p>这是您要放的内容！</p>
   </div>
     <div class="rtop">
       <div class="r4"></div>
    <div class="r3"></div>
    <div class="r2"></div>
    <div class="r1"></div>
  </div>
</div>

==============*/

/*====================================浏览器兼容解决方案======================================================*/

<!--[if  ie 6.0]>
<link rel="stylesheet" href="ie6.css" type="text/css" media="all"  />
<![endif]-->
<!--[if ie 7.0]>
<link rel="stylesheet" href="ie7.css" type="text/css" media="all"  />
<![endif]-->

在调用样式表时加上上述语句可根据不同的浏览器调用不同的样式表
 
/* Clear Fix */
.clearfix:after {
content:“.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}
/*可解块浏览的兼容问题*/
body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"宋体"; text-align:center;}

/*在body中加入text-algin:center在火狐中并不能使内容整体居中，所以在层上加上marign:0 auto;*/
ul,ol{list-style-type:none;}
#line{
width:800px;
height:8px;

background:#f00; /* for firefox */
 
*background:#0f0;   /* for IE6 */   
_background:#00f; /*FOR IE7.0，7。0不支支下划线*/

overflow:hidden;/*在ie6.0中，高度小于10px时会出现问题，比实际的要高，所以要加上此句，或者将字体设同高度一样的值,font-size:8px;*/

}
#width{
width: 500px!important; /* 只对IE7+FF有效 */
width:300px;
border:1px double #0ff;
height:100px;
background:#ff0;
}
#f_l{
width:180px;
border:1px double #0ff;
height:50px;
float:right; margin-right:20px;/*在有浮动的时候在ie6.0是居右并非20px，而是40px,即加倍问题,解块办法加上display:inline */
display:inline ;
}

#nav{/*ff有效*/
height:100px;
width:800px;
background:#0ff;
line-height:100px;
vertical-align: middle;
}
*html #nav{/*只对ie有效*/
height:100px;
width:800px;
background:#0ff;
line-height:100px;
vertical-align: middle;
}
*+html #nav{/*只对ie7.0有效*/
height:300px;
width:800px;
background:#0ff;
line-height:300px;
vertical-align: middle;/*文字垂直居中*/