《前端开发、web设计等涉及HTMLcss兼容、常见问题》由会员分享，可在线阅读，更多相关《前端开发、web设计等涉及HTMLcss兼容、常见问题（28页珍藏版）》请在金锄头文库上搜索。
1、工作总结【1】border-stylesolid 实线dashed 虚线dotted 点线（IE6不兼容）【2】area shape【3】css 表达式http:/ 4+、Chrome 、Safari 5+ 以及 Opera 支持 border-radius 属性。-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;【5】font-family:iconfont图标字体（iconfont） ，是一种把图标放入自定义字体中，然后使用字体来替代显示普通图标的技术。http:/www.iloveoli
2、ve.info/2013/03/use-iconfon/【6】html 术语【7】cursor: pointer;【8】letter-spacing: -.02em;【9】CSS3 边框图片通过 CSS3 的 border-image 属性，您可以使用图片来创建边框【10】white-space:nowrap; 【11】在 IE6下不支持 position:fixed;的时候_position:absolute;_bottom:auto;_top:expression(eval(document.documentElement.scrollTop+document.documentElemen
3、t.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)|0)-(parseInt(this.currentStyle.marginBottom,10)|0);【12 】 LI 中内容超过长度后以省略号显示的方法此方法适用与 IE 与 OP 浏览器还有一个 jsvar DD_belatedPNG=ns:DD_belatedPNG,imgSize:,delay:10,nodesFixed:0,createVmlNameSpace:function()if(document.namespaces&!docu
4、ment.namespacesthis.ns)document.namespaces.add(this.ns,urn:schemas-microsoft-com:vml);,createVmlStyleSheet:function()var _1,_2;_1=document.createElement(style);_1.setAttribute(media,screen);document.documentElement.firstChild.insertBefore(_1,document.documentElement.firstChild.firstChild);if(_1.styl
5、eSheet)_1=_1.styleSheet;_1.addRule(this.ns+:*,behavior:url(#default#VML);_1.addRule(this.ns+:shape,position:absolute;);_1.addRule(img.+this.ns+_sizeFinder,behavior:none; border:none; position:absolute; z-index:-1; top:-10000px; visibility:hidden;);this.screenStyleSheet=_1;_2=document.createElement(s
6、tyle);_2.setAttribute(media,print);document.documentElement.firstChild.insertBefore(_2,document.documentElement.firstChild.firstChild);_2=_2.styleSheet;_2.addRule(this.ns+:*,display: none !important;);_2.addRule(img.+this.ns+_sizeFinder,display: none !important;);,readPropertyChange:function()var el
7、,_4,v;el=event.srcElement;if(!el.vmlInitiated)return;if(event.propertyName.search(background)!=-1|event.propertyName.search(border)!=-1)DD_belatedPNG.applyVML(el);if(event.propertyName=style.display)_4=(el.currentStyle.display=none)?none:block;for(v in el.vml)if(el.vml.hasOwnProperty(v)el.vmlv.shape
8、.style.display=_4;if(event.propertyName.search(filter)!=-1)DD_belatedPNG.vmlOpacity(el);,vmlOpacity:function(el)if(el.currentStyle.filter.search(lpha)!=-1)var _7=el.currentStyle.filter;_7=parseInt(_7.substring(_7.lastIndexOf(=)+1,_7.lastIndexOf(),10)/100;el.vml.color.shape.style.filter=el.currentSty
9、le.filter;el.vml.image.fill.opacity=_7;,handlePseudoHover:function(el)setTimeout(function()DD_belatedPNG.applyVML(el);,1);,fix:function(_9)if(this.screenStyleSheet)var _a,i;_a=_9.split(,);for(i=0;i_21.H)c.B=_21.H;el.vml.image.shape.style.clip=rect(+c.T+px +(c.R+_22)+px +c.B+px +(c.L+_22)+px);elseel.
10、vml.image.shape.style.clip=rect(+dC.T+px +dC.R+px +dC.B+px +dC.L+px);,figurePercentage:function(bg,_32,_33,_34)var _35,_36;_36=true;_35=(_33=X);switch(_34)case left:case top:bg_33=0;break;case center:bg_33=0.5;break;case right:case bottom:bg_33=1;break;default:if(_34.search(%)!=-1)bg_33=parseInt(_34
11、,10)/100;else_36=false;bg_33=Math.ceil(_36?(_32_35?W:H*bg_33)-(_32_35?w:h*bg_33):parseInt(_34,10);if(bg_33%2=0)bg_33+;return bg_33;,fixPng:function(el)el.style.behavior=none;var lib,els,_3a,v,e;if(el.nodeName=BODY|el.nodeName=TD|el.nodeName=TR)return;el.isImg=false;if(el.nodeName=IMG)if(el.src.toLow
12、erCase().search(/.png$/)!=-1)el.isImg=true;el.style.visibility=hidden;elsereturn;elseif(el.currentStyle.backgroundImage.toLowerCase().search(.png)=-1)return;lib=DD_belatedPNG;el.vml=color:,image:;els=shape:,fill:;for(v in el.vml)if(el.vml.hasOwnProperty(v)for(e in els)if(els.hasOwnProperty(e)_3a=lib
13、.ns+:+e;el.vmlve=document.createElement(_3a);el.vmlv.shape.stroked=false;el.vmlv.shape.appendChild(el.vmlv.fill);el.parentNode.insertBefore(el.vmlv.shape,el);el.vml.image.shape.fillcolor=none;el.vml.image.fill.type=tile;el.vml.color.fill.on=false;lib.attachHandlers(el);lib.giveLayout(el);lib.giveLay
14、out(el.offsetParent);el.vmlInitiated=true;lib.applyVML(el);trydocument.execCommand(BackgroundImageCache,false,true);catch(r)DD_belatedPNG.createVmlNameSpace();DD_belatedPNG.createVmlStyleSheet();然后在你的图片那块加上 class=“pngfix” 然后就可以了【13】怎么样才能让层显示在 FLASH 之上呢?解决的办法是给 FLASH 设置透明:【14】怎样使一个层垂直居中于浏览器中?这里使用百分比绝
15、对定位，与外补丁负值的方法，负值的大小为其自身宽度高度除以二,margin 可以以百分比的形式写【15】firefox 嵌套 div 标签的居中问题的解决方法假定有如下情况：如果要实现 b 在 a 中居中放置，一般只需用 CSS 设置 a 的 text-align 属性为 center。这样的方法在 IE 里看起来一切正常；但是在 Firefox 中 b 却会是居左的。解决办法就是设置 b 的横向 margin 为 auto。例如设置 b 的 CSS 样式为：margin: 0 auto;。【16】li 元素中包含 img 元素的时候，IE 中 img 下面多出了5px 左右的空白A使 li 浮动，并设置 img 为块级元素 B设置 ul 的 font-size:0; C设置 img 的margin-bottom: -5px;16实例body,div,h1,p,ul
