当前位置:  编程技术>WEB前端

ie6,ie7,ie8完美支持position:fixed的终极解决方案

    来源: 互联网  发布时间:2014-10-07

ie6对position:fixed不支持,网上有很多解决方法,有的在ie6,ie7上调试成功后,在ie8上又不好使,div层还是跟随滚动条浮 动;以下总结方法,在ie6,ie7,ie8上都调试成功,且页面滚动条滚动时,效果还挺好,div层并不会闪烁。

代码如下:

<div id="goTop_div" >  </div>

css:

代码如下:

.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) - 1);
}

    
相关技术文章:
    ▪小技巧处理div内容溢出

     前几天遇到一个问题,代码是这样一个层次: 代码如下:<div class="province">    <ul>        <li>1</li>        <li>2</li>        <li>3</li>    </ul></div> 我设置了div的边框, 要想ul的内容在边框内, 必须设置div高度。 但是,ul内的内容是变化的,内容少的时候就不及div的高度。 不设高度的时候,ul的内容就出现在边框外了。 原来需要设置ul的边框。想想也是,先设置与他关系最近的元素吧。 ......


    ▪html小技巧之td,div标签里内容不换行

     在一些页面开发中,除自己操作外,引起换行的情况一般有: Ex一.td标签里内容长度过长引起换行; Ex二.div标签(或其他标记)里内容有文本和图片引起换行; 解决方法:   针对例子一用<nobr></nobr>标签把换行的内容全部包起来,可以解决问题;   针对例子二用CSS样式white-space: nowrap;可以使图片和内容不换行,(经自己测试使用<nobr></nobr>标签也可以). ......


    ▪纯CSS实现鼠标放上去改变文字内容

     css样式 代码如下:.remind span {display:block;margin-top:-22px;}.remind a:hover {padding-top:22px;}.remind a {float:left;overflow:hidden;}.remind{height:22px;line-height:22px;overflow:hidden;padding-left:10px;} html代码 代码如下:<div class="remind"><a href="#"><span>如需修改帐号,请发送修改信息及相关证明至邮箱</span>提示</a></div> 具体实例 ......


 
最新技术文章:
    ▪css white-space:nowrap属性用法(可以强制文字不换行输出)

     强制不换行,直接使用white-space:nowrap即可。CSS设置不转行: overflow:hidden 隐藏 white-space:normal 默认 pre 换行和其他空白字符都将受到保护 nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象例:强制不换行 代码如下: div{white-space:nowrap;} ......


    ▪IE里button设置border:none属性无效解决方法

     某个元素设置无边框,只需要给元素设置border:none即可,当然设置border:0效果一样,但实际上两者是有性能差别的 代码如下:border:none:边框设置为为none,不做任何处理;border:0:边框宽度设置为0像素,但是实际上border-color和border-style还是在渲染的。然而在IE中,对于button和input元素确并不是这样,在IE6,7中border:none仅等价于border-style:none,而边框所占的空间还是在的。这导致了调input的宽度和高度在各个浏览器中不统一!在IE6,7中,虽然设置了border:none后,边框仍存在。不信你试一试。下面给......


    ▪border:none与border:0使用区别

     一、border:noneborder-style的简写在chrome审查元素看到以下结果 代码如下:element.style {border: none;border-top-style: none;border-right-style: none;border-bottom-style: none;border-left-style: none;border-width: initial;border-color: initial;}在firefox中用firebug查看元素会看到以下结果: 代码如下:element.style {    border: medium none;}注意这个medium值二、border:0border-width的简写在chrome审查元素看到以下结果......


 


站内导航:


特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

©2012-2015,169IT.COM,站长邮箱:www_169it_com#163.com(请将#改为@)

浙ICP备11055608号