澳门新葡亰平台游戏网站ie6,ie7,ie8完美支持position:fixed的终极解决方案

ie6对position:fixed不扶持,互连网有过多解决方法,有的在ie6,ie7上调整成功后,在ie8上又倒霉使,div层依然跟随滚动条浮
动;以下计算方法,在ie6,ie7,ie8上都调节和测量试验成功,且页面滚动条滚动时,效果还非常好,div层并不会闪烁。

第一种艺术:纯CSS 如今英特网有的相当多的是这种设计方案: 复制代码 代码如下: html{overflow:hidden;}
body{height:100%;overflow:auto;} #rightform
form{position:absolute;right:30px;top50px;}
那一个情势有三个bug未减轻:在IE6下会把全体position:absolute都成为“浮动”的要素;还会有使用js方法滚动滚动条时会并发对象闪烁,如下方法结合了CSS和js的方法,解决了以上的标题。
复制代码 代码如下:

复制代码 代码如下:

复制代码 代码如下:div /div

IE6 fixed

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>简易弹出框</title>
<style type=”text/css”>
.mydiv {
background-color: #ff6;
border: 5px solid #f90;
text-align: center;
line-height: 40px;
font-size: 12px;
font-weight: bold;
z-index:99;
width: 300px;
height: 120px;
left:50%;/*FF IE7*/
top: 50%;/*FF IE7*/

css:

1111

margin-left:-150px!important;/*FF IE7 */
margin-top:-60px!important;/*FF IE7 */

复制代码 代码如下:.fixed{ position:fixed;
/*对于火狐等别的浏览器供给设置的*/ top:700px; /*同上*/ width:30px;
height:30px; cursor:pointer; display:none; } .ie{ _position: absolute;
_clear: both; _top:expression(eval(document.compatMode
document.compatMode==’CSS1Compat’) ? documentElement.scrollTop
+(documentElement.clientHeight-this.clientHeight) – 1 :
document.body.scrollTop +(document.body.clientHeight-this.clientHeight)

show

margin-top:0px;

  • 1); }

只兑现了垂直方向的fixed。若要达成程度方向的fixed,设置_left:expression(documentElement.scrollLeft

position:fixed!important;/*FF IE7*/
position:absolute;/*IE6*/

  • “px”State of Qatar;
    利用给安装固定的背景,幸免滚动条滚动时的闪动;如若中要设置滚动的背景而发出矛盾,能够把代码写在html选用器里面,如:
    复制代码 代码如下: html {
    _background-image: url; _background-attachment: fixed; /* prevent
    screen flash in IE6 */ } body { background-image: url;
    background-attachment: scroll; } 其次种办法 JavaScript 复制代码 代码如下:

_top: expression(eval(document.compatMode &&
document.compatMode==’CSS1Compat’) ?
documentElement.scrollTop +
(document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
document.body.scrollTop + (document.body.clientHeight –
this.clientHeight)/2);/*IE5 IE5.5*/

position_fixed测试

}

测验内容………

.bg {
background-color: #ccc;
width: 100%;
height: 100%;
left:0;
top:0;/*FF IE7*/
filter:alpha(opacity=10);/*IE*/
opacity:0.8;/*FF*/
z-index:1;
position:fixed!important;/*FF IE7*/
position:absolute;/*IE6*/

测量检验内容………

_top: expression(eval(document.compatMode &&
document.compatMode==’CSS1Compat’) ?
documentElement.scrollTop +
(document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
document.body.scrollTop + (document.body.clientHeight –
this.clientHeight)/2);/*IE5 IE5.5*/

测试内容………

}
/*The END*/

测量试验内容………

</style>
<script type=”text/javascript”>
function showDiv(){
document.getElementById(‘popDiv’).style.display=’block’;
document.getElementById(‘bg’).style.display=’block’;
}

测量检验内容………

function closeDiv(){
document.getElementById(‘popDiv’).style.display=’none’;
document.getElementById(‘bg’).style.display=’none’;
}

测量试验内容………

</script>

测验内容………

</head>

测验内容………

<body>

测量试验内容………

<div id=”popDiv” class=”mydiv”
style=”display:none;”><br/>弹框内容<br/>
<a href=”javascript:closeDiv()”>关闭</a></div>
<div id=”bg” class=”bg” style=”display:none;”></div>

测验内容………

<div style=”padding-top: 20px;”>
<input type=”Submit” name=”” value=”点此弹框”
onclick=”javascript:showDiv(卡塔尔(قطر‎” />
</div>
</body>
</html>

测量检验内容………

代码如下: !DOCTYPE html PUBLIC
“-//W3C//DTD XHTML 1.0 Transitional//EN”
“” html
xmlns=”…

测量试验内容………

测量试验内容………

测量检验内容………

测量试验内容………

变动的剧情2

自己的位置是原则性的!推动滚动条看效果。

ie6对postion:fixed的八面驶风施工方案
前不久去一老外站见到了那他站上的格外平整但却不曾js,好奇,原本。。玄妙啊,分享下,相对来讲相比较节省能源。但效用好,使用方便,统筹w3c。哈哈
ie-stuff.css 复制代码 代码如下: #footer
{ position: absolute; bottom: auto; clear: both;
top:expression(eval(document.compatMode &&
document.compatMode==’CSS1Compat’) ? documentElement.scrollTop
+(documentElement.clientHeight-this.clientHeight) – 1 :
document.body.scrollTop +(document.body.clientHeight-this.clientHeight)

  • 1); }
You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图