CSS 常用定位以及各种恶心兼容

 

1.居中兼容

.Untitled{

    position: absolute;

    width: 850px;

    height: 768px;

    margin-left:-425px;

    top:0px;

    left:50%;

    z-index: 999;

    filter: alpha(opacity=0);

    opacity:0/100;

  }

实现：红色标注就是实现4要素；

 

2.浮动层固定位

1.外包围法

 

 

html, body {

      height: 100%;

      overflow: auto;

  }

  .wrapper {  //替代body为滚动条

      position: relative;

      width: 100%;

      height: 100%;

      overflow: auto;

  }

  .box {

      position: fixed;

      right: 20px;

      bottom: 80px;

  }

  html .box {

      position: absolute;              //兼容IE

  }

 

<div class="wrapper"> 

 </div>

 

<div class="box"><a href="#content" style="float:right;">返回顶部</a></div>

2.兼容法

 

#tbox{

width:47px; height:73px; float:right; position:fixed;

_position:absolute;     //兼容IE6

_bottom:auto;     //兼容IE6

_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));     //兼容IE6

_margin-bottom:45px; //兼容IE6

}

#gotop{

width:47px; height:47px; background:url(../common/static/images/top.png) no-repeat; position:absolute; top:0px; display:none; cursor:pointer

}

 

 

 

 

<!-- 代码开始 -->

 

<div id="tbox">

 

<!-- <a id="gotop" href="javascript:void(0)"></a> -->

<a id="gotop" href="#"></a>

 

</div>

 

 

<!-- 代码结束 -->

 

 3.expression简短版

.returnTop{

position:fixed;

left:50%;

bottom:115px;

*bottom:116px;

cursor:pointer;

background-color:#fcfcfc;

border:1px solid #cfcfcf;

_position:absolute;

_bottom:110px;

_top:expression(documentElement.scrollTop+documentElement.clientHeight - this.clientHeight-118+'px');

margin-left:482px;

width:64px;

height:64px;

background-image:url(http://img5.cache.netease.com/tie/images/return-top.png);

background-position:12px 20px;

background-repeat:no-repeat;

}

.returnTop:hover,.returnTop:active{background-position:12px -40px}

.returnTop a{display:block;width:64px;height:64px;text-indent:-9999em;overflow:hidden}

 

<div id="returnTop" class="returnTop" style="display: block; ">

<a href="javascript:;" class="js-statistics" statistics="action=click;value=returnTop;"><em></em>返回顶部</a>

</div>

 

效果在chrome如下：

1. position: fixed;
2. left: 50%;
3. bottom: 115px;
4. display: none;
5. cursor: pointer;
6. background-color: #FCFCFC;
7. border: 1px solid #CFCFCF;
8. _position: absolute;
9. _bottom: 110px;
10. _top: expression(documentElement.scrollTop+documentElement.clientHeight - this.clientHeight-118+'px');
11. margin-left: 482px;
12. width: 64px;
13. height: 64px;
14. background-image: url(http://img5.cache.netease.com/tie/images/return-top.png);
15. background-position: 12px 20px;
16. background-repeat: no-repeat;

 

span,img,em,input,a等这些元素,而对div,h3,p等这些块元素是无效的

关于IE6/7不支持display:inline-block

http://snipplr.com/view/23414/display-inlineblock-hack-for-ie6-ie7--ff2/

1. <style>
2. li {
3. width: 200px;
4. min-height: 250px;
5. border: 1px solid #000;
6. display: -moz-inline-stack; // Firefox 2
7. display: inline-block;
8. vertical-align: top;
9. margin: 5px;
10. zoom: 1; // IE hack to trigger hasLayout
11. *display: inline; // IE hack to achieve inline-block behavior
12. }
13. </style>
14. 顺序一定不能变，

    IE中对内联元素使用display:inline-block，IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表征。从上面的这个分析，也不难理解为什么IE下，对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触发了layout，而它本身就是行布局，所以触发后，块元素依然还是行布局，而不会如Opera中块元素呈递为内联对象http://www.cnblogs.com/leejersey/archive/2012/07/11/2586506.html

两个display 要先后放在两个CSS声明中才有效果，这是IE的一个经典bug，如果先定义了display:inline-block，然后再将display设回 inline或block，layout不会消失）。