IE6浏览器不支持固定定位(position:fixed)解决方案

代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title> New Document </title>

</head>
<body>
<div
style="width:600px;height:2000px;">正常普通流元素</div>

<div
style="position:fixed;bottom:10px;left:50px;width:400px;height:200px;color:#fff;">position:fixed元素</div>

</body>
</html>

上面的代码在IE6中打开,效果如下

  而在其他浏览器(IE7+、firefox、opera、safari、chrome)下则正常显示:

经过多次测试,原来不只在IE6下,在IE7、IE8浏览器下,若是文档使用的是怪异(quirk)模式也会导致这个问题。这也难怪,当IE7、8使用怪异模式时,渲染引擎将以接近IE6的渲染模式来解析CSS。最后,我得出了以下结论:

   IE6、IE7(quirk模式)、IE8(quirk模式) 浏览器将 ‘position‘ 特性的 fixed 值当作错误值处理。从而导致使用固定定位的元素使用 ‘position‘ 的默认值 static。即这个元素在 此时 变成了普通流中的元素,这必然会导致布局错位等问题。

  解决方案:   

  在 IE6、IE7(quirk模式)、IE8(quirk模式)中为固定定位元素设置 ‘_position:absolute‘,再通过 JavaScript 脚本或者 CSS Expression 动态设置其偏移量,但是我发现只能实现在最底部和最顶部固定。要想设置具体的位置还需要配合_margin。

使元素固定在浏览器的顶部

代码如下:

#top {
_position: absolute;

_bottom: auto;
_top:
expression(eval(document.documentElement.scrollTop));
}

使元素固定在浏览器的底部

代码如下:

#bottom {
_position: absolute;

_bottom: auto;
_top:
expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));

}

  这两段代码只能实现在最底部跟最顶部,你可以使用 _margin修改其中的数值控制元素的位置。

  看到这里,你一定以为已经完事了。NO!还有bug:被固定定位的元素在滚动滚动条的时候会出现一闪一闪的情况。解决这个问题的办法是在 CSS
文件中加入:

代码如下:

* html{

background-image:url(about:blank);
background-attachment:fixed;
}

或者:

代码如下:

body {
_background-attachment:fixed;

_background-image:url(about:blank);
}

  当然,也可以用吧javascript方法解决,不过有点大材小用:

代码如下:

window.onresize = window.onscroll =
function(){
//code
};

IE6浏览器不支持固定定位(position:fixed)解决方案

时间: 2024-11-05 19:19:06

IE6浏览器不支持固定定位(position:fixed)解决方案的相关文章

层模型--固定定位(position:fixed)

fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身. 由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小, 因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed?属性功能相同. 以下代码可以实现相对于浏览器视图向右移动100px,向下移动50px.并且拖动滚动条时位置固定不变. <!

两种解决IE6不支持固定定位的方法

有两种让IE6支持position:fixed1.用CSS执行表达式 *{margin:0;padding:0;} * html,* html body{ background-image:url(about:blank); background-attachment:fixed; } * html .fixed{ position:absolute; bottom:auto; top:expression(eval(document.documentElement.scrollTop+ doc

中文版Chrome浏览器不支持12px以下字体的解决方案 (转)

中文版Chrome浏览器不支持12px以下字体的解决方案 Chrome 27之前的中文版桌面浏览器会默认设定页面的最小字号是12px,英文版则没有限制,主要是因为chrome认为汉字小于12px就会增加识别难度,尤其是中文常用的宋体和微软雅黑.而我们在实际项目中,对于数字/英文内容,其他字体的文本可能会有特殊的需求要求它们以更小的字号来显示,这个时候就需要取消浏览器的自动调整功能了. 一般解决方案是禁止webkit浏览器配置调整网页的字体大小.如下CSS定义方式: [css] view plai

移动端position:fixed 解决方案

相信不少人做移动端项目的时候都会遇到position:fixed 的坑. 下面提供一个解决方法,不用引入任何其他的js库,纯css解决. 解决问题的关键就是:fixed元素内部必须嵌套一个position:absolute元素,用来装载内容,目的就是为了让内容脱离fixed文档流,屏蔽一些fixed的坑 html部分 <!DOCTYPE html> <html lang="zh_cmn"> <head> <meta name="des

华为手机浏览器不支持PUT提交方式的解决方案

最近所在技术团队在开发webapp项目,前端angularjs+后端.Net MVC API,API登录接口定义为PUT提交方式,在做兼容测试时发现UC.safari.微信浏览器下都可以登录,但在华为自带浏览器下登录接口总是报错,抓包发现PUT提交请求体为空,用Inisomnia模拟提交空值得到和华为浏览器一样的接口返回信息,初步判断为浏览器提交了空值,Google了一下确实存在部分手机浏览器不支持PUT提交的情况,后在华为官网上了看下了,已有人遇到过来类似的情况,看来该浏览器确实不支持PUT提

Chrome浏览器不支持本地Ajax请求的解决方案

问题描述: 通过Ajax获取本地JSON文件时候,报Received an invalid response. Origin 'null' is therefore not allowed access. 错误. 原因: Chrome浏览器不支持本地Ajax请求,当在html文件中使用Ajax时候,就报错. 解决方案: 右击chrome浏览器快捷方式图标,选择属性,在目标中添加:--allow-file-access-from-files,与chrome.exe之前有个空格.

中文版Chrome浏览器不支持12px以下字体的解决方案

解决方案是禁止webkit浏览器配置调整网页的字体大小. 如下CSS定义方式: html,body{-webkit-text-size-adjust:none;} 或: .classstyle{font-size:10px;-webkit-transform:scale(0.8);display:block;}

微信浏览器不支持下载文件或应用解决方案--跳转到默认浏览器打开

在微信的内置浏览器(QQ内置浏览器也一样)里他屏蔽了下载链接,不管是app的下载链接,还是普通文件的链接都屏蔽了,这个问题有两个解决方案. 首先如果你是App下载链接就传到腾讯应用宝,但是这会给应用宝带来流量,如果二次下载折损率很高.其二就是提示引导用户在浏览器打开所以如果你没有将软件上传到应用宝里,或者你的文件不是APP,那么就需要第二种方法了,首先是需要判断用户的浏览器是否为微信内置浏览器,如果是弹出一个图层,提示用户点击右上角的三个点,然后点击在浏览器中打开即可.但是这种用户体验很差.经过

完美解决IE6不支持position:fixed的bug【转】

废话不多说,先看一下下面这段代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>IE6 position:fixed bug</title> <style> *{padding:0;margin:0} p{heigh