|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
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
- /*让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:我只在尺度形式下举行了测试。
属性值就追加上去,重复的属性值就以最后一个为准。这里要注意的是,样式的先后不是根据页面上应用的名字顺序,而是样式表里的样式顺序。 |
|