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如下:
- position: fixed;
- left: 50%;
- bottom: 115px;
- display: none;
- 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;
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/
-
<style>
-
li {
-
width: 200px;
-
min-height: 250px;
-
border: 1px solid #000;
-
display: -moz-inline-stack; // Firefox 2
-
display: inline-block;
-
vertical-align: top;
-
margin: 5px;
-
zoom: 1; // IE hack to trigger hasLayout
-
*display: inline; // IE hack to achieve inline-block behavior
-
}
-
</style>
- 顺序一定不能变,
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不会消失)。
相关推荐
CSS 常用的颜色以及相应的 值 CSS 常用的颜色以及相应的 值
css常用代码大全(html+css代码).pdfcss常用代码大全(html+css代码).pdfcss常用代码大全(html+css代码).pdfcss常用代码大全(html+css代码).pdfcss常用代码大全(html+css代码).pdfcss常用代码大全(html+css代码).pdf
css常用文字定义 包含了一些常用的CSS代码 的文字解释
什么是CSS hack: 由于不同的浏览器,对CSS的解析认识不一样,从而导致生成的页面效果不一样,得不到我们所需要的页面效果。 针对不同的浏览器写不同的CSS code的过程,就叫CSS hack,也叫写CSS hack
css常用属性
浏览器兼容常见问题css兼容 css兼容 浏览器兼容 IE6789兼容
特别垃圾的网站,这是我做过的最恶心的。所以不要分。我认为大家上传资源都不该要分。构建一个纯粹的交流平台
CSS的各种浏览器兼容一栏表
CSS样式命名以及兼容性.pdf
详解css定位与定位应用,很棒的指南哦,让你知道css如何定位
CSS常用属性和属性大全,CSS常用属性和属性大全,CSS常用属性和属性大全
CSS在不同浏览器中兼容问题CSS在不同浏览器中兼容问题CSS在不同浏览器中兼容问题CSS在不同浏览器中兼容问题CSS在不同浏览器中兼容问题CSS在不同浏览器中兼容问题
详细的汇总了CSS常用属性,css+div配合。适合初学者或或以适应着查询。
css渐变代码,代码兼容各个浏览器,适用于ie7以上及各主流浏览器
HTML+CSS常用代码
本文收集整理了IE7,6与Fireofx的CSS兼容性处理技巧,供大家参考。 CSS兼容常用技巧
CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页...
CSS常用属性整理.pdf
本人整理的css定位
CSS常用英语词汇大全