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. JS Math.max() 函数

    Math.max(a,b,...,x,y) -- 返回数个数字中较大的值 max是maximum的缩写,中文"最大量"的意思 max函数语法Math.max(a,b,...,x,y ...

  2. php 常用数组操作

    php常用的数组操作函数,包括数组的赋值.拆分.合并.计算.添加.删除.查询.判断.排序等 array_combine 功能:用一个数组的值作为新数组的键名,另一个数组的值作为新数组的值 <?p ...

  3. ini配置文件格式

    转自:http://blog.sina.com.cn/s/blog_6988593e0101e6i4.html  程序没有任何配置文件,那么它对外是全封闭的,一旦程序需要修改一些参数必须要修改程序代码 ...

  4. hongxin

    邀请链接 :http://honx.in/_VbiG2CZDjwIE8l1t

  5. 黑马程序员——C语言基础 流程控制 选择结构和循环结构

    ---恢复内容开始--- Java培训.Android培训.iOS培训..Net培训.期待与您交流! (以下内容是对黑马苹果入学视频的个人知识点总结) (一)流程控制 1> 顺序结构:默认的流程 ...

  6. H5的FormData对象完成ajax上传文件multiFile

    最近工作中需要完成,ajax上传图片,可是input file +ajax是无法完成的: 于是寻找了许久,发现了H5 的一个对象FormData 使用方法如下: HTML: <form id=& ...

  7. HTML编辑器

    终于有时间静下来总结一下最近的工作. 第一个就是html编辑器: 首先是编辑器的选择,之前用的是ewebeditor,功能很强大,出于粘贴word内容得安装插件的原因,暂时放弃. ewebeditor ...

  8. android系统自带的日期、时间对话框的用法

    代码: package com.test; import java.util.Calendar; import android.app.Activity; import android.app.Dat ...

  9. JRE JDK JVM是什么

    jre: Java Runtime Environment java运行环境 ----------------------------------------- jdk:Java Developmen ...

  10. JAVAWEB学习总结 SERVLET开发(二)

    一.ServletConfig对象 1.1.配置servlet初始化参数 在servlet的配置文件中web.xml中,可以使用一个或多个<init-param>标签为servlet配置一 ...