fixed真的是一个很好的属性。特别是做弹层的时候。可惜的是“国内主流浏览器”IE6大大不支持。

一般的我们都会通过CSS中的表达式来解决这个问题。

.fixed {
position:absolute;
left:expression(eval(document.documentElement.scrollLeft));
top:expression(eval(document.documentElement.scrollTop))
}

好吧,希望施主的钛合金眼还好。一闪一闪亮晶晶~~~

html,html body {
background-image:url(about:blank);
background-attachment:fixed
}

这个已经是IE很出名的“BUG” 了,当滚动或调整浏览器大小时,它将重置所有内容并重画页面,会重新处理CSS表达式,最终就闪坏了施主的钛合金眼。上面的代码可以让浏览器在重画之前首先处理CSS表达式,这样就让你实现完美的fixed了。

其实还有个问题了……,做弹层的时候居中的问题。

非IE6的时候

.float {
left:50%;
top:50%;
margin-left:-262px;
margin-top:-180px;
width:525px;
height:360px;
}

left和top的属性已经被表达式占用了。这个也很简单的,获取页面的宽度和高度,计算出直接的margin值就好了。

注意高度应该用document.documentElement.clientHeight,这样的话就是可视区域的高度。特别是用遮罩层的时候,否则会出现,页面可以无限下拉的情况。

打造IE6的position:fixed整理篇的更多相关文章

  1. 让IE6兼容position:fixed

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. IE6下position:fixed;兼容

    *html{ background-image:url(about:blank); background-attachment:fixed;}/*解决抖动问题*/ .backto-top{ width ...

  3. IE6的position:fixed

    手头一个项目中,要实现把一个浮层控制在浏览器窗口右下角,用”position:fixed”来控制最合适不过了. 但万恶的IE6不支持这个属性,之前采用过的方法有:将滚动条转移到body上,使用绝对定位 ...

  4. IE6中position:fixed无效问题解决

    在做页面右下脚对话框时,直接使用position:fixed;大部分浏览器很容易就能做到,但是在IE6中却发现不行,原来是IE6不支持position:fixed;这个属性. 虽然用JS肯定能解决这个 ...

  5. IE6下position:fixed不支持问题及其解决方式

    IE6有诸多奇葩,不支持position:fixed就是当中之中的一个.所以在做一些比方固定在顶部或者底部或者固定元素的效果时须要考虑兼容IE6的这个问题.解决方式是用Ie6的hack. *html ...

  6. 让IE6支持position:fixed的方法,CSS expression与JavaScript eval讲解

    做吸顶效果或是固定效果时,使用position:fixed无非是最方便的,可是万恶的IE6是没有fixed这个属性值的,而我们要使IE6能够像fixed一样固定在浏览器中的某个位置,使用onscrol ...

  7. ie6下position:fixed定位问题

    1. *html{ background-image:url(about:blank); background-attachment:fixed;}2.将需要用固定定位的元素中加上_position: ...

  8. 解决IE6下固定定位问题 使用position:fixed

    IE6浏览器有太多的bug让制作网页的人头疼.这篇文章介绍的是介绍的是如何解决IE6不支持position:fixed;属性的办法. 如果我们需要做某个元素始终位于浏览器的底部,不会因为浏览器窗口的缩 ...

  9. 解决IE6浏览器下position:fixed固定定位问题

    像你所遇到的问题一样, IE6浏览器有太多的bug让制作网页的人头疼.这篇文章介绍的是介绍的是如何解决IE6不支持position:fixed;属性的办法.如果我们需要做某个元素始终位于浏览器的底部, ...

随机推荐

  1. RASPBERRY PI 外设学习资源

    参考: http://www.siongboon.com/projects/2013-07-08_raspberry_pi/index.html Raspberry Pi         Get st ...

  2. STM32——DMA接收和发送的实现

    最近写程序,需要一段一段数据的接收,再通过其他串口发送出去. 老司机们建议用DMA通信,以节约CPU资源.然后,我听了,发现挺好用的.特此,把自己写的代码贴上了. DMA发送接收的步骤如下: 1.初始 ...

  3. DevExpress gridControl 设置分组

    有些代码非常有用,但是用的时候就记不清怎么写,所以就在这里打个草稿. //设置组汇总 private void SetSummation() { this.gridViewShipment.Group ...

  4. HTML5与CSS3经典代码

    1)全屏背景 body { background: url(../img/pic.jpg) no-repeat center center fixed; background-size: cover; ...

  5. firefox,跨域ajax 调用方法

    在A站点ajax 调用B站的页面(方法)时, 使用post,且dataType类型为jsonp 有时在IE会有No Transport的错误提示,请加 jQuery.support.cors = tr ...

  6. build and set proxy in Ubuntu

    build http://www.2cto.com/os/201310/249690.html set http://www.360doc.com/content/11/1112/00/2617151 ...

  7. Power of Four(Difficulty: Easy)

    题目: Given an integer (signed 32 bits), write a function to check whether it is a power of 4. Example ...

  8. mysql关于timestamp类型

    数据库设置时间字段为timestamp类型,DTO设置为java.util.Date类型.DTO设值sessionLogDTO.setLoginOutTime(new Date());用new Dat ...

  9. 数论学习笔记之解线性方程 a*x + b*y = gcd(a,b)

    ~>>_<<~ 咳咳!!!今天写此笔记,以防他日老年痴呆后不会解方程了!!! Begin ! ~1~, 首先呢,就看到了一个 gcd(a,b),这是什么鬼玩意呢?什么鬼玩意并不 ...

  10. angularjs的简单应用(一)

    AngularJS是为了克服html在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了. AngularJS使用了不同的方法,它尝试去 ...