来谈谈:怎样让position:fixed在IE6中事情
凡是和我讨论客户段效率的全是脑子有问题的,影响的全是图片和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
123456789101112/*让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:我只在尺度形式下举行了测试。
属性值就追加上去,重复的属性值就以最后一个为准。这里要注意的是,样式的先后不是根据页面上应用的名字顺序,而是样式表里的样式顺序。 您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别,但它同时也存在着致命的弱点。 滚动条)层属性--溢出(visible/hidden/scroll/auto) 在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。 布局表格、绘制层、制作CSS样式表等,这些内容迷糊了我的视线,真是没想到制作一个精巧别致的网页是如此的困难,可是心有不甘。 还可以在Dreamweaver常用工具中选择超级链接,完成相应的填写即可。 帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。 这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时,就要多花时间对其产生初步的印象。此外,多操作也是非常重要的。 这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时,就要多花时间对其产生初步的印象。此外,多操作也是非常重要的。
页:
[1]