CSS样式常用兼容属性之日积月累

平铺浏览器整个背景的图片尺寸，1,920px × 1,052px

background: url(sbsx_20140127__bg.jpg) #000 no-repeat center -50px fixed;

1.各大浏览求透明度设置

{

background:#9567aa;

filter:alpha(opacity=60); //IE系列识别
-moz-opacity:0.8; //火狐私有
opacity:0.8;//通用

}

2.取消默认样式，以及公共类样式

/* CSS Document */

*{ margin:0; padding:0;}
fieldset, img {
    border: 0;
}
img{ vertical-align:top;}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
address, caption, cite, code, dfn,
em, strong, th, var, optgroup {
    font-style: normal;
}
strong{color:#383838; }
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
    
}
abbr, acronym {
    border: 0;
    font-variant: normal;
}

input, button, textarea,
select, optgroup, option {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
}
code, kbd, samp, tt {
    font-size: 100%;
}
/*@purpose To enable resizing for IE */
/*@branch For IE6-Win, IE7-Win */
input, button, textarea, select {
    font-size: 100%;
}

ol, ul {
    list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}
caption, th {
    text-align: left;
}
sup, sub {
    font-size: 100%;
    vertical-align: baseline;
}
/* remember to highlight anchors and inserts somehow! */
:link, :visited , ins,a {
    text-decoration: none;
}
a:hover{ text-decoration:none; color:#6b3b80;}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
.main a { color:#444;
}
.main a:hover { color:#6b3b80;
}
iframe{ margin:0px; padding:0px; border:none;}


.active{ color:#6b3b80;}
li.active a{color:#6b3b80;}

/*主体*/
body{background-color:#f5f5f5;color:#595959; font-family:"宋体"; text-align:center;  font-size:12px; overflow-x:hidden; }
.main{width:1000px; margin:0 auto; text-align:center; background:#fff;}

.r{ display:inline; float:right;}
.l{ display:inline; float:left;}

/*div自适应高度 */

.mains{clear:both;height:auto !important; height:80px; /*假定最低高度是200px*/min-height:80px;}

/*应用实例

<div class="mains"> 这个自适应高度试用与改div只是存在少量元素</div>

.zsy{font: 0px/0px sans-serif;clear: both;display: block;}/*试用与网站主题结构main*/

/*应用实例

<div class=“main”>

<div  class="zsy"></div>

</div>

*/

/*清除浮动*/
.clear{clear:both; height:0px;font: 0px/0px sans-serif;}

.endmune {height:90px; z-index:1;
position:fixed !important;
 _position:absolute; _bottom:auto; _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop, 10)||0)-(parseInt(this.currentStyle.marginBottom, 10)||0)));
bottom:0px; text-align:center; width:100%; left:0px;} //底部跟随显示（始终在底部）

注：

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

IE6能识别*，但不能识别 !important,

IE7能识别*，也能识别!important;

FF不能识别*，但能识别!important;

另外再补充一个，下划线”_“,IE6支持下划线，IE7和firefox均不支持下划线。

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

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

文字强制同行

 a{height:18px;line-height:18px; display:inline-block; white-space:nowrap;} //红色部分代码加上显示正常

IE6png 图片不透明解决方案

#logo{

background:" path/logo.png";

_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src="path/logo.png");

_background:none;

}

这样在IE6或者其他浏览器上都可以有透明效果了。

不过注意的是，如果css是放在html  head里面的，红色部分的url和蓝色部分的url是相同的，但是如果放在外部的css文件中，情况就不一样了，蓝色部分的地址应该相对于引用的地址。

//转

特此总结了一些解决方案，不一定是最好。。。

一、用滤镜解决IE6下png不完全透明

注意： ie6png背景图片不显示，别紧张，把绝对路径地址加上即可。
filter: progid XImageTransform.Microsoft.AlphaImageLoader(src=” 绝对路径”);
_ background-image: none;

二、ie6里png背景做循环问题：用一个半透明图片做背景循环平铺。解决办法加“sizingMethod=scale”。
filter: progid XImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=”图片名称”);
_ background-image: none;
注意：有些图片存在弊端，如果只是单独颜色循环，这种可以。如果是图案平铺，即不行。具体也还得根据图片而定。。。一句话，尽可能用gif吧。

三、ie6里不做循环的大png图片背景会出现区块被剪切，网站版面一片混乱，文字消失问题：解决办法加sizingMethod=crop。
filter: progid XImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src=”图片名称”)
_ background-image: none;

四、ie6里png背景下的的连接失效：解决办法给a元素添加样式  position:relative;

链接所在的层以及父级，全都不能有position，否则的话链接无效，即使relative也不行！

五、ie7里png背景下的div下的dl dt dd ul li等有float浮动时，连接文字在鼠标滑过出现一条背景消失的问题。解决办法是给包含dl dt dd ulli的div大盒子加上一个高度或最小高度。
min-height:50px;因为ie6下没有这个问题，min-height:又是ie6不支持的，ie7和FF支持，而div要随着文字而伸长，所以我就采用了min-height:。

六、如题二，用滤镜解决IE6下透明问题后，又出现了一新bug！
在背景图上面可能出现,登录框，连文字链接也无法点击了
解决办法是可以把背景图层和上面的内容图层分开，比如
<div style=“ position:relative; ” >
       <div style=“ position:absolute; background:url（png24的背景图片）;”>这边是背景图层</div>
       <div  style=“ position:absolute; ” >背景层上面的内容</div>
<div>

1.半圆

.pieL{
    width:132px; height:132px; background-color:blue;
    border-radius:100px;             //W   //H
    position:absolute; clip:rect(0px,120px,16px,66px);

//从上移除0个像素   //右边移除132-120 （个像素）//从下移除（132（H）-16个像素） 从左边移除66px
上右下左 顺时针方向 （两头吃，中间减。）

    transform:rotate(0deg);
}