- 浏览: 225517 次
- 性别:
- 来自: 重庆
文章分类
最新评论
-
husw:
不错,感谢分享!
fixed仿淘宝工具栏效果(两种) -
08tankuai:
试了一下!还不错,谢谢。
利用CSS让容器的溢出部分内容隐藏起来,smarty就可以不用截取字符串了 -
m2maomao:
yxyysu 写道明 白 了。恩,非常easy的。
让框架Frameset居中,并且固定宽度的巧妙办法 -
yxyysu:
明 白 了。
让框架Frameset居中,并且固定宽度的巧妙办法 -
yxyysu:
楼主,这段代码是什么意思呢?
为什么能出现这样的效果呢?
让框架Frameset居中,并且固定宽度的巧妙办法
废话不多说,先看一下下面这段代码:
<!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{height:2000px}
#gs{border:1px solid #000;position:fixed;right:30px;top:120px}
</
style
>
<!--[if IE 6]>
<style type="text/css">
html{overflow:hidden}
body{height:100%;overflow:auto}
#gs{position:absolute}
</style>
<![endif]-->
</
head
>
<
body
>
<
div
id
=
"rightform"
>
<
p
>11111111111111111</
p
>
<
input
id
=
"gs"
name
=
"gs"
type
=
"text"
value
=
""
/>
</
div
>
</
body
>
</
html
>
|
以上这段代码在网上很常见,通过设置html{overflow:hidden} 和body{height:100%;overflow:auto} 来实现ie6下position:fixed效果,但这种办法有个缺陷,那就是:这会使页面上原有的absolute、relation都变成fixed的效果,在这里我就不做demo了,如果有怀疑,可以自己去试验一下。
于是我找了下资料,发现可以通过一条Internet Explorer的CSS表达式(expression)来完美的实现ie6下position:fixed效果,css代码如下:
/* 除IE6浏览器的通用方法 */
.ie
6
fixedTL{
position
:
fixed
;
left
:
0
;
top
:
0
}
.ie
6
fixedBR{
position
:
fixed
;
right
:
0
;
bottom
:
0
}
/* IE6浏览器的特有方法 */
* html .ie
6
fixedTL{
position
:
absolute
;
left
:expression(eval(document.documentElement.scrollLeft));
top
:expression(eval(document.documentElement.scrollTop))}
* html .ie
6
fixedBR{
position
:
absolute
;
left
:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,
10
)||
0
)-(parseInt(this.currentStyle.marginRight,
10
)||
0
));
top
:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,
10
)||
0
)-(parseInt(this.currentStyle.marginBottom,
10
)||
0
)))}
|
上面代码可以直接使用了,如果要设置元素悬浮边距,要分别为设置两次,比如我要让某个元素距顶部10个像素,距左部也是10个像素,那就要这样子写:
/* 除IE6浏览器的通用方法 */
.ie
6
fixedTL{
position
:
fixed
;
left
:
10px
;
top
:
10px
}
/* IE6浏览器的特有方法 */
* html .ie
6
fixedTL{
position
:
absolute
;
left
:expression(eval(document.documentElement.scrollLeft+
10
));
top
:expression(eval(document.documentElement.scrollTop+
10
))}
|
这样一来,IE6下实现position:fixed的效果解决了,而且也不会影响到其他的absolute、relation,但还有一个问题,就是悬浮的元素会出现振动
IE有一个多步的渲染进程。当你滚动或调整你的浏览器大小的时候,它将重置所有内容并重画页面,这个时候它就会重新处理css表达式。这会引起一个丑陋的“振动”bug,在此处固定位置的元素需要调整以跟上你的(页面的)滚动,于是就会“跳动”。
解
决此问题的技巧就是使用background-attachment:fixed为body或html元素添加一个background-image。这
就会强制页面在重画之前先处理CSS。因为是在重画之前处理CSS,它也就会同样在重画之前首先处理你的CSS表达式。这将让你实现完美的平滑的固定位置
元素!
|
然后我发现background-image无需一张真实的图片,设置成about:blank就行了。
下面附上完整代码
/* 除IE6浏览器的通用方法 */
.ie
6
fixedTL{
position
:
fixed
;
left
:
0
;
top
:
0
}
.ie
6
fixedBR{
position
:
fixed
;
right
:
0
;
bottom
:
0
}
/* IE6浏览器的特有方法 */
/* 修正IE6振动bug */
* html,* html body{
background-image
:
url
(about:blank);
background-attachment
:
fixed
}
* html .ie
6
fixedTL{
position
:
absolute
;
left
:expression(eval(document.documentElement.scrollLeft));
top
:expression(eval(document.documentElement.scrollTop))}
* html .ie
6
fixedBR{
position
:
absolute
;
left
:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,
10
)||
0
)-(parseInt(this.currentStyle.marginRight,
10
)||
0
));
top
:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,
10
)||
0
)-(parseInt(this.currentStyle.marginBottom,
10
)||
0
)))}
至于demo我想大家都看到了吧:)
发表评论
-
Javascript 严格模式详解
2015-11-10 11:32 489一、概述 除了正常运 ... -
Javascript 装载和执行
2015-09-17 14:17 531一两个月前在淘宝内网里看到一个优化Javascript代码的 ... -
IE6、7下li元素的子元素为dl,ul,ol时产生的bug
2015-09-15 14:54 604话不多说,先看测试代码: 该段代码在标准浏览器(包括 ... -
Web前端开发和JS面向对象编程分享 一、前端开发的重要性 1. Web2.0、AJAX、JSON、用户体验 2. HTML5、微网、移动互联网
2015-09-15 11:20 1573Web前端开发和JS面向对象编程分享 一、前端 ... -
网格(UED所谓栅格化)方案生成器
2015-09-03 14:30 518本文转载于:http://www.tw ... -
让wamp本地测试WordPress支持自定义固定链接
2014-02-19 19:32 665让wamp本地测试WordPress支持自定义 ... -
背景拉伸平铺
2013-09-13 15:28 730现在WEB页面设计比较流行使用大背景图,那么您知道如何使用一 ... -
CSS强制性换行
2013-08-19 17:31 627一般情况下,元素拥有默认的white-space:norm ... -
自己写的美女瀑布流分享一下
2012-08-01 16:32 649<!DOCTYPE HTML PUBLIC " ... -
fixed仿淘宝工具栏效果(两种)
2012-08-01 15:59 1690看到有人正在找这个效果,而我正好也在研究,所以发上来,共享一下 ... -
做CSS固定窗口发现IE6下不兼容,下面是解决position:fixed在IE6下不兼容的方法
2012-05-17 16:18 1015写道 .fixed-top /* 头部固定 */{ ... -
去掉链接(包括图片链接)的虚线边框
2012-05-08 09:47 703/* for IE */ a,area { blr: ... -
chrome,safari,firefox,ie6.ie7,ie8,ie9各浏览器CSS Hack总结
2012-05-04 08:20 1562这个浏览器百花齐放的时代,身为一名前端开发人员,我想最头痛的就 ... -
1024下网页宽度标准(网络摘抄)
2012-04-29 21:24 842研究网页栅格系统前,来看一组数据: 网站 首页页面宽度 p ... -
CSS实现将div固定在页面指定地方
2012-04-24 17:21 961用一个div作为提示信息或者与用户交互的层控件, ... -
IE和Firefox浏览器下javascript、CSS兼容性研究
2012-04-24 17:04 730为了将公司的产品在IE和Firefox下达到兼容,前段时间做了 ... -
如何通过CSS实现div的固定位置,不随页面滚动消失
2012-04-24 16:56 1417每个 Web Developer / Designer 都知道 ... -
如何去掉链接虚线框,css去链接虚线,html链接虚线框隐藏
2012-02-12 11:34 1193链接的虚线框影响整 ... -
让apache支持shtml 文件,aphache shtml
2012-01-10 09:58 746介绍一下shtml和shtm 关于shtml,shtml是一 ... -
firefox ie 字体不一样
2012-01-10 09:44 1063今天无意遇到了火狐,IE不一致。那么在公共样式里加如下代码: ...
相关推荐
这个内容是老生常谈了,主要问题就是IE6不支持 position:fixed 引起的BUG.当我们去搜索解决这个bug的垮浏览器解决办法时,绝大多数结果都是说使用 position:absolute 来替代解决,可是我们真的解决了么?没有,因为当页面...
总的来说,解决IE6不支持`position:fixed`的bug需要开发者具备深厚的前端知识,包括CSS兼容性、CSS Hack以及对JavaScript表达式的理解。同时,也需要权衡性能与兼容性的关系,适时地做出技术决策,以适应不断变化的...
本文将详细介绍如何解决 IE6 不支持 `position:fixed` 的问题,并提供一种完美的解决方案。 首先,让我们分析一下 IE6 中的 `position:fixed` bug。在标准浏览器中,设置 `position:fixed` 可以使元素相对于浏览器...
### 解决IE6中的定位问题:Position Fixed 在早期的Web开发中,Internet Explorer 6(简称IE6)因其浏览器兼容性问题而臭名昭著。其中一个常见的问题是`position: fixed;`属性在IE6中不起作用。这使得开发者很难...
标题中的“IE6 position:fixed bug (固定窗口方法)”指的是在Internet Explorer 6浏览器中,使用CSS的`position:fixed`属性时出现的一个兼容性问题。`position:fixed`通常用于创建固定定位的元素,使其在页面滚动时...
以上就是解决IE6中 `position:fixed` 兼容性的技巧。需要注意的是,这些方法仅适用于IE6,对于其他版本的IE或者现代浏览器,可以直接使用 `position:fixed`。在实际开发中,考虑到跨浏览器兼容性和性能,通常会结合...
IE6 position:fixed bug</title> <style> *{padding:0;margin:0} p{height:2000px} #gs{border:1px solid #000;position:fixed;right:30px;top:120px} </style> <!–[if IE 6]>
在其他现代浏览器中,CSS的`position`属性如`relative`、`absolute`和`fixed`能很好地实现元素的定位,但在IE6中,这些属性的处理方式却大不相同,导致开发者需要进行特殊的“hack”来解决这些问题。 首先,IE6不...
IE6浏览器对于CSS3中的position: fixed属性的支持并不完善,这在设计网页时给前端开发者带来了不小的挑战。随着IE7及以上版本的浏览器开始支持position: fixed属性,对于仍广泛使用的IE6浏览器,我们需要寻找其他...
然而,IE6并不支持CSS的"fixed"定位,导致元素无法随页面滚动保持在屏幕上的固定位置。 解决这个问题的一种方法是结合使用CSS和JavaScript。首先,我们可以为元素设置一个"absolute"定位,然后通过CSS选择器来覆盖...
1. IE的`position:fixed`在某些版本中存在bug,可能无法正确固定元素位置。 2. Firefox对`position:fixed`的支持较好。 八、单位支持 1. IE6不支持em和百分比单位,推荐使用像素。 2. Firefox支持em、百分比等...
标题中的“IE又一个让人吐血的BUG: 关于 table的position 和 select”指的是在Internet Explorer(IE)浏览器中,开发者遇到的一个与HTML表格(table)的定位(position)属性和下拉选择框(select)相关的bug。...
IE6存在一个著名的双边距BUG,即当元素设置为`float`属性后,其左右`margin`会出现加倍现象。解决此问题可以通过添加!important声明来覆盖IE6的错误计算: ```css margin-left: 10px !important; /* IE7, IE8, FF ...
CSS兼容性height/width, position:fixed, …脚本问题:Java script 兼容性DOM, Date.getYear, scrollTop, …缺陷(bug)与特性(feature)IE: 盒模型,float,text-alignIE: filter, 资源太大,传百度网盘了...