仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 601|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 来谈谈:怎样让position:fixed在IE6中事情

[复制链接]
只想知道 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 23:41:05 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
凡是和我讨论客户段效率的全是脑子有问题的,影响的全是图片和Flash,所以我一直建议一个提交按钮就不要用图片带代替了。
网页制造poluoluo文章简介:本文所利用的技能是用了一条InternetExplorer的CSS表达式(expression)。你不成以间接利用该表达式,由于它大概会由于缓存而不更新。办理这一点的最复杂的体例是利用eval包裹你的语句。
尽人皆知IE6不撑持position:fixed,这个bug与IE6的双倍margin和不撑持PNG通明等bug一样臭名远扬。前些天我做本人的博客模板的时分,碰到了这个成绩。事先就复杂的忽视了IE6——只管有几个利用IE6的伴侣,一同BS我……可是关于年夜项目或贸易网站,假如有效到这个属性的时分,是不成能间接忽视的。

你是怎样让position:fixed在IE6中事情的?

本文所利用的技能是用了一条InternetExplorer的CSS表达式(expression)。你不成以间接利用该表达式,由于它大概会由于缓存而不更新。办理这一点的最复杂的体例是利用eval包裹你的语句。
怎样办理“振动”的成绩?

明显IE有一个多步的衬着历程。当你转动或调剂你的扫瞄器巨细的时分,它将重置一切内容偏重画页面,这个时分它就会从头处置css表达式。这会引发一个丑恶的“振动”bug,在此处流动地位的元素必要调剂以跟上你的(页面的)转动,因而就会“跳动”。
办理此成绩的技能就是利用background-attachment:fixed为body或html元素增加一个background-image。这就会强迫页面在重画之前先处置CSS。由于是在重画之前处置CSS,它也就会一样在重画之前起首处置你的CSS表达式。这将让你完成完善的光滑的流动地位元素!
这个计划并非我供应的。我是在网上的某个中央读到这些的。假如你晓得是谁原创了这个办法,请告知前端察看。
我发明的别的一个小技能是,你基本无需一个实在的图片!你可使用一个about:blank替换一个spacer.gif图片,并且它事情的一样杰出。
CSSCode
  1. 123456789101112
复制代码
  1. /*让position:fixed在IE6下可用!*/.fixed-top/*头部流动*/{position:fixed;bottom:auto;top:0px;}.fixed-bottom/*底部流动*/{position:fixed;bottom:0px;top:auto;}.fixed-left/*左边流动*/{position:fixed;right:auto;left:0px;}.fixed-right/*右边流动*/{position:fixed;right:0px;left:auto;}/*下面的是除IE6的支流扫瞄器通用的办法*/*html,*htmlbody/*修改IE6振动bug*/{background-image:url(about:blank);background-attachment:fixed;}*html.fixed-top/*IE6头部流动*/{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}*html.fixed-right/*IE6右边流动*/{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));}*html.fixed-bottom/*IE6底部流动*/{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)));}*html.fixed-left/*IE6左边流动*/{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));}
复制代码
更新:增加border、padding和margin撑持!
Note:假如你不必要撑持margin,能够将一切的`parseInt`部分往失落。
Note:我只在尺度形式下举行了测试。

属性值就追加上去,重复的属性值就以最后一个为准。这里要注意的是,样式的先后不是根据页面上应用的名字顺序,而是样式表里的样式顺序。
小女巫 该用户已被删除
沙发
发表于 2015-1-17 23:42:25 | 只看该作者
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别,但它同时也存在着致命的弱点。
金色的骷髅 该用户已被删除
板凳
发表于 2015-1-24 22:27:12 | 只看该作者
滚动条)层属性--溢出(visible/hidden/scroll/auto)
因胸联盟 该用户已被删除
地板
发表于 2015-2-2 16:05:01 | 只看该作者
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
柔情似水 该用户已被删除
5#
发表于 2015-2-8 03:09:34 | 只看该作者
布局表格、绘制层、制作CSS样式表等,这些内容迷糊了我的视线,真是没想到制作一个精巧别致的网页是如此的困难,可是心有不甘。
爱飞 该用户已被删除
6#
发表于 2015-2-24 10:31:04 | 只看该作者
还可以在Dreamweaver常用工具中选择超级链接,完成相应的填写即可。
冷月葬花魂 该用户已被删除
7#
发表于 2015-3-7 12:11:27 | 只看该作者
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
admin 该用户已被删除
8#
发表于 2015-3-15 06:59:21 | 只看该作者
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时,就要多花时间对其产生初步的印象。此外,多操作也是非常重要的。
变相怪杰 该用户已被删除
9#
发表于 2015-3-21 22:54:00 | 只看该作者
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时,就要多花时间对其产生初步的印象。此外,多操作也是非常重要的。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-29 22:56

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表