在ie6下实现position-fixed的效果--------续集---对联效果（02）

在ie6下实现position-fixed的效果，这回是实现的对联效果，没有JS在里面的对联效果，但是没有JS的动感。

这个的原理是和《在ie6下实现position-fixed的效果》的是一样的。

CSS：

1 <style type="text/css">
2 *{ margin:0; padding:0}
3 html{ height:100%; overflow:hidden}
4 body{height:100%; overflow:hidden; position:relative; font-size:14px;}
5 .duilian01{ position:absolute; width:100px; height:200px; left:50%; top:20px; border:1px solid #666; background:#fc0; margin:0 0 0 -520px}
6 .duilian02{ position:absolute; width:100px; height:200px; left:50%; top:20px; border:1px solid #666; background:#fc0; margin:0 0 0 400px}
7 .budong{ overflow:auto; height:100%;overflow-y:scroll;}
8 .budong-cen{ width:800px; border:1px solid #09F; background:#CCC; margin:0 auto}
9 </style>

HTML：

1 <div class="duilian01">1111111111</div>
2 <div class="duilian02">2222222222</div>
3 <div class="budong">
4     <div class="budong-cen">
5         2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />
6         2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />
7         2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />
8         2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />
9         2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />
10         2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />
11     </div>
12 </div>
13

转载于:https://www.cnblogs.com/zhengenru2008/archive/2009/08/12/1544266.html

在ie6下实现position-fixed的效果--------续集---对联效果（02）相关推荐

完美解决IE6不支持position:fixed的bug
废话不多说,先看一下下面这段代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content- ...
修正IE6不支持position:fixed的bug
众所周知IE6不支持position:fixed,这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著.前些天我做自己的博客模板的时候,遇到了这个问题.当时就简单的无视了IE6- ...
实现 IE6 支持 position fixed 的 CSS 属性
众所周知 IE6 不支持 position:fixed ,这个 bug 与 IE6 的双倍 margin 和不支持 png 透明等 bug 一样臭名昭著. 如何让 position:fixed 在 I ...
CSS的position:fixed的使用(固定不动的div)
前段时间,在做一个项目时需要使一个层相对于浏览器边框固定,那时用position:absolute试了下,发觉absolute是对网页边框而言的.后来,上网查了一些根据滚动条的移动,动态地改变left ...
ie6 下最佳 PNG透明方案【转】
"咳! 哎!-.. " 你听见了么? 这些都是大家抱怨IE6下不能实现png图片漂亮的明效果的哀叫声,的确是无奈呀-.. 不过现在幸运的是,我们能够让这一切的抱怨都停止. 网络上解 ...
position:fixed 兼容浏览器低版本
项目中遇到的坑,写篇博客做个笔记纪念下,position: fixed一般来说都兼容各个浏览器,但是要兼容浏览低版本问题,就得用-webkit-transform: translateZ(0);这段代 ...
解决IE6下 position的fixed定位问题
html{ _background:url(about:blank); /* 阻止IE6闪动 , 把空文件连接换成about:blank , 减少请求 */ } /* 图层 */ .pFixed{ p ...
模态框在IE下的问题，即position:fixed在IE下不兼容的处理方式
项目中遇到的问题,模态框在IE下总出现如图所示双层遮罩框,经排查发现是由于bootstrap里写的modal的样式里position:fixed不兼容IE的原因,导致铺不满整个窗口. 解决方案:在项目 ...
IE6下position:absolute的定位BUG(转载)
position:absolute定位在IE6下存在left和bottom的定位错误问题: XHTML  <div style="p ...

在ie6下实现position-fixed的效果--------续集---对联效果（02）

在ie6下实现position-fixed的效果--------续集---对联效果（02）相关推荐

最新文章

热门文章