做网站需要什么服务器,上海网站推广维新,怎么制作外贸网站模板,高古楼网站找活做这几天在查找和解决网页在ie6下的兼容性问题花了我不少的时间#xff0c;参考了网上的一些解决方法和自己做出来比较有效果的给大家参考一下#xff0c;也方便我日后再用到#xff1a; 1.IE的cache设置为Every visit to the page#xff0c;而不是默认的Automatically。基本…这几天在查找和解决网页在ie6下的兼容性问题花了我不少的时间参考了网上的一些解决方法和自己做出来比较有效果的给大家参考一下也方便我日后再用到 1.IE的cache设置为Every visit to the page而不是默认的Automatically。基本上只有开发者才会把cache设置为每次访问检查更新所以这个bug其实不会影响真正的用户 根据在winxpsp2的ie6下测试虽然可能仍然调用了一次网络存取的api但是并没有发生实际的请求症状就是鼠标有极短时间的抖动但是图像不会闪烁特别是在hover下图片会发生抖动。代码 document.execCommand(BackgroundImageCache, false, true); //对背景图片进行缓存避免每次访问都要从服务器端重新载入、来回折腾加快页面加载速度。用这种方法甚至避免了api调用貌似是直接缓存在IE内存中针对IE7以下的IE有效其实在IE7中已经修复了这个Bug。css方法html {filter:expression(document.execCommand(BackgroundImageCache, false, true));}js方法window.isIEnavigator.appName.indexOf(Microsoft)0;if(isIE){ document.documentElement.addBehavior(#default#userdata); document.execCommand(BackgroundImageCache,false,true);}2.ie6下鼠标移到图片上hover.png图片透明背景的解决方法语法script typetext/javascriptDD_belatedPNG.fix(img图片class类名, 要hover的透明图片或容器的名字 a:hover);/script*注意a标签里面必须要加入href鼠标移到图片上才可以更换背景图。 eg: 1 head2 !--[if IE 6]3 script typetext/javascript srcjs/DD_belatedPNG.js/script4 script5 DD_belatedPNG.fix(.ico-A01, .ico-A01 a:hover);6 DD_belatedPNG.fix(.ico-A02, .ico-A02 a:hover);7 DD_belatedPNG.fix(.ico-A03, .ico-A03 a:hover);8 DD_belatedPNG.fix(.ico-A04, .ico-A04 a:hover);9 DD_belatedPNG.fix(.ico-B01, .ico-B01 a:hover);
10 DD_belatedPNG.fix(.ico-B02, .ico-B02 a:hover);
11 DD_belatedPNG.fix(.ico-B03, .ico-B03 a:hover);
12 /script
13 ![endif]--
14 /head
15 body
16 div classquick-line
17 a href classico-A01span社区/span/a
18 div classcuttingLine/div
19 a href classico-A02span资讯/span/a
20 div classcuttingLine/div
21 a href classico-A03span最新/span/a
22 div classcuttingLine/div
23 a href classico-A04span移动/span/a
24 /div
25 body css代码
#quickbar .cuttingLine { float:right; height:1px; width:40px; background:url(../images/quickbarCuttingline.png) no-repeat center;}
#quickbar .ico-A01{display:block; float:right; height:40px; width:0; padding:10px 40px 10px 0; overflow:hidden; background:url(../images/quickbarIcon.png) no-repeat 0 center;}
#quickbar .ico-A01:hover{ background:url(../images/quickbarIcon.png) no-repeat 20px center;}
#quickbar .ico-A02{display:block; float:right; height:40px; width:0; padding:10px 40px 10px 0; overflow:hidden; background:url(../images/quickbarIcon.png) no-repeat -40px center;}
#quickbar .ico-A02:hover{ background:url(../images/quickbarIcon.png) no-repeat -20px center;}
#quickbar .ico-A03{display:block; float:right; height:40px; width:0; padding:10px 40px 10px 0; overflow:hidden; background:url(../images/quickbarIcon.png) no-repeat -80px center;}
#quickbar .ico-A03:hover{ background:url(../images/quickbarIcon.png) no-repeat -60px center;}
#quickbar .ico-A04{display:block; float:right; height:40px; width:0; padding:10px 40px 10px 0; overflow:hidden; background:url(../images/quickbarIcon.png) no-repeat -120px center;}
#quickbar .ico-A04:hover{ background:url(../images/quickbarIcon.png) no-repeat -100px center;} *记得要引入一个DD_belatedPNG.js文件附上js代码 /**
* DD_belatedPNG: Adds IE6 support: PNG images for CSS background-image and HTML IMG/.
* Author: Drew Diller
* Email: drew.dillergmail.com
* URL: http://www.dillerdesign.com/experiment/DD_belatedPNG/
* Version: 0.0.8a
* Licensed under the MIT License: http://dillerdesign.com/experiment/DD_belatedPNG/#license
*
* Example usage:
* DD_belatedPNG.fix(.png_bg); // argument is a CSS selector
* DD_belatedPNG.fixPng( someNode ); // argument is an HTMLDomElement
**/
var DD_belatedPNG{ns:DD_belatedPNG,imgSize:{},delay:10,nodesFixed:0,createVmlNameSpace:function(){if(document.namespaces!document.namespaces[this.ns]){document.namespaces.add(this.ns,urn:schemas-microsoft-com:vml)}},createVmlStyleSheet:function(){var b,a;bdocument.createElement(style);b.setAttribute(media,screen);document.documentElement.firstChild.insertBefore(b,document.documentElement.firstChild.firstChild);if(b.styleSheet){bb.styleSheet;b.addRule(this.ns\\:*,{behavior:url(#default#VML)});b.addRule(this.ns\\:shape,position:absolute;);b.addRule(img.this.ns_sizeFinder,behavior:none; border:none; position:absolute; z-index:-1; top:-10000px; visibility:hidden;);this.screenStyleSheetb;adocument.createElement(style);a.setAttribute(media,print);document.documentElement.firstChild.insertBefore(a,document.documentElement.firstChild.firstChild);aa.styleSheet;a.addRule(this.ns\\:*,{display: none !important;});a.addRule(img.this.ns_sizeFinder,{display: none !important;})}},readPropertyChange:function(){var b,c,a;bevent.srcElement;if(!b.vmlInitiated){return}if(event.propertyName.search(background)!-1||event.propertyName.search(border)!-1){DD_belatedPNG.applyVML(b)}if(event.propertyNamestyle.display){c(b.currentStyle.displaynone)?none:block;for(a in b.vml){if(b.vml.hasOwnProperty(a)){b.vml[a].shape.style.displayc}}}if(event.propertyName.search(filter)!-1){DD_belatedPNG.vmlOpacity(b)}},vmlOpacity:function(b){if(b.currentStyle.filter.search(lpha)!-1){var ab.currentStyle.filter;aparseInt(a.substring(a.lastIndexOf()1,a.lastIndexOf())),10)/100;b.vml.color.shape.style.filterb.currentStyle.filter;b.vml.image.fill.opacitya}},handlePseudoHover:function(a){setTimeout(function(){DD_belatedPNG.applyVML(a)},1)},fix:function(a){if(this.screenStyleSheet){var c,b;ca.split(,);for(b0;bc.length;b){this.screenStyleSheet.addRule(c[b],behavior:expression(DD_belatedPNG.fixPng(this)))}}},applyVML:function(a){a.runtimeStyle.cssText;this.vmlFill(a);this.vmlOffsets(a);this.vmlOpacity(a);if(a.isImg){this.copyImageBorders(a)}},attachHandlers:function(i){var d,c,g,e,b,f;dthis;c{resize:vmlOffsets,move:vmlOffsets};if(i.nodeNameA){e{mouseleave:handlePseudoHover,mouseenter:handlePseudoHover,focus:handlePseudoHover,blur:handlePseudoHover};for(b in e){if(e.hasOwnProperty(b)){c[b]e[b]}}}for(f in c){if(c.hasOwnProperty(f)){gfunction(){d[c[f]](i)};i.attachEvent(onf,g)}}i.attachEvent(onpropertychange,this.readPropertyChange)},giveLayout:function(a){a.style.zoom1;if(a.currentStyle.positionstatic){a.style.positionrelative}},copyImageBorders:function(b){var c,a;c{borderStyle:true,borderWidth:true,borderColor:true};for(a in c){if(c.hasOwnProperty(a)){b.vml.color.shape.style[a]b.currentStyle[a]}}},vmlFill:function(e){if(!e.currentStyle){return}else{var d,f,g,b,a,c;de.currentStyle}for(b in e.vml){if(e.vml.hasOwnProperty(b)){e.vml[b].shape.style.zIndexd.zIndex}}e.runtimeStyle.backgroundColor;e.runtimeStyle.backgroundImage;ftrue;if(d.backgroundImage!none||e.isImg){if(!e.isImg){e.vmlBgd.backgroundImage;e.vmlBge.vmlBg.substr(5,e.vmlBg.lastIndexOf())-5)}else{e.vmlBge.src}gthis;if(!g.imgSize[e.vmlBg]){adocument.createElement(img);g.imgSize[e.vmlBg]a;a.classNameg.ns_sizeFinder;a.runtimeStyle.cssTextbehavior:none; position:absolute; left:-10000px; top:-10000px; border:none; margin:0; padding:0;;cfunction(){this.widththis.offsetWidth;this.heightthis.offsetHeight;g.vmlOffsets(e)};a.attachEvent(onload,c);a.srce.vmlBg;a.removeAttribute(width);a.removeAttribute(height);document.body.insertBefore(a,document.body.firstChild)}e.vml.image.fill.srce.vmlBg;ffalse}e.vml.image.fill.on!f;e.vml.image.fill.colornone;e.vml.color.shape.style.backgroundColord.backgroundColor;e.runtimeStyle.backgroundImagenone;e.runtimeStyle.backgroundColortransparent},vmlOffsets:function(d){var h,n,a,e,g,m,f,l,j,i,k;hd.currentStyle;n{W:d.clientWidth1,H:d.clientHeight1,w:this.imgSize[d.vmlBg].width,h:this.imgSize[d.vmlBg].height,L:d.offsetLeft,T:d.offsetTop,bLW:d.clientLeft,bTW:d.clientTop};a(n.Ln.bLW1)?1:0;efunction(b,p,q,c,s,u){b.coordsizec,s;b.coordoriginu,u;b.pathm0,0lc,0lc,sl0,s xe;b.style.widthcpx;b.style.heightspx;b.style.leftppx;b.style.topqpx};e(d.vml.color.shape,(n.L(d.isImg?0:n.bLW)),(n.T(d.isImg?0:n.bTW)),(n.W-1),(n.H-1),0);e(d.vml.image.shape,(n.Ln.bLW),(n.Tn.bTW),(n.W),(n.H),1);g{X:0,Y:0};if(d.isImg){g.XparseInt(h.paddingLeft,10)1;g.YparseInt(h.paddingTop,10)1}else{for(j in g){if(g.hasOwnProperty(j)){this.figurePercentage(g,n,j,h[backgroundPositionj])}}}d.vml.image.fill.position(g.X/n.W),(g.Y/n.H);mh.backgroundRepeat;f{T:1,R:n.Wa,B:n.H,L:1a};l{X:{b1:L,b2:R,d:W},Y:{b1:T,b2:B,d:H}};if(m!repeat||d.isImg){i{T:(g.Y),R:(g.Xn.w),B:(g.Yn.h),L:(g.X)};if(m.search(repeat-)!-1){km.split(repeat-)[1].toUpperCase();i[l[k].b1]1;i[l[k].b2]n[l[k].d]}if(i.Bn.H){i.Bn.H}d.vml.image.shape.style.cliprect(i.Tpx (i.Ra)px i.Bpx (i.La)px)}else{d.vml.image.shape.style.cliprect(f.Tpx f.Rpx f.Bpx f.Lpx)}},figurePercentage:function(d,c,f,a){var b,e;etrue;b(fX);switch(a){caseleft:casetop:d[f]0;break;casecenter:d[f]0.5;break;caseright:casebottom:d[f]1;break;default:if(a.search(%)!-1){d[f]parseInt(a,10)/100}else{efalse}}d[f]Math.ceil(e?((c[b?W:H]*d[f])-(c[b?w:h]*d[f])):parseInt(a,10));if(d[f]%20){d[f]}return d[f]},fixPng:function(c){c.style.behaviornone;var g,b,f,a,d;if(c.nodeNameBODY||c.nodeNameTD||c.nodeNameTR){return}c.isImgfalse;if(c.nodeNameIMG){if(c.src.toLowerCase().search(/\.png$/)!-1){c.isImgtrue;c.style.visibilityhidden}else{return}}else{if(c.currentStyle.backgroundImage.toLowerCase().search(.png)-1){return}}gDD_belatedPNG;c.vml{color:{},image:{}};b{shape:{},fill:{}};for(a in c.vml){if(c.vml.hasOwnProperty(a)){for(d in b){if(b.hasOwnProperty(d)){fg.ns:d;c.vml[a][d]document.createElement(f)}}c.vml[a].shape.strokedfalse;c.vml[a].shape.appendChild(c.vml[a].fill);c.parentNode.insertBefore(c.vml[a].shape,c)}}c.vml.image.shape.fillcolornone;c.vml.image.fill.typetile;c.vml.color.fill.onfalse;g.attachHandlers(c);g.giveLayout(c);g.giveLayout(c.offsetParent);c.vmlInitiatedtrue;g.applyVML(c)}};try{document.execCommand(BackgroundImageCache,false,true)}catch(r){}DD_belatedPNG.createVmlNameSpace();DD_belatedPNG.createVmlStyleSheet(); 3.窗口浮动之侧边栏悬浮框固定问题让IE6支持固定定位的CSS写法当页面过长滚动条往下滚动时侧边栏始终固定在屏幕上。关键代码说明IE6并不支持CSS固定定位position:fixed;利用微软提供的expression方法来实现。在ie6下固定要用 _position:absolute; _right:0;_bottom:30px;eg:截图一当右下角的快捷栏距离底部30px #quickbar-nano { position:fixed; bottom:30px; right:0; width:30px; height:90px; line-height:15px; color:#FFF; z-index:990; display:block; _position:absolute; _right:0; top: expression(offsetParent.scrollTopdocument.documentElement.clientHeight-this.offsetHeight-30px);}还有一种写法我试过也可以{top:expression(eval(document.body.scrollTop 30));}#quickbar-nanoposition:fixed; bottom:30px; right:0; width:30px; height:90px; line-height:15px; color:#FFF; z-index:990; display:block; _position:absolute; _right:0;top:expression(eval(document.body.scrollTop 30));} 截图二#quickbar { position:fixed; bottom:0; right:0; z-index:990; width:40px;height:100vh; height:100%\9; background:#666; display:block; _position:absolute; _right:0; top: expression(offsetParent.scrollTopdocument.documentElement.clientHeight-this.offsetHeight);} 这里有个使用js的例子 *注意bug:速度取整 !DOCTYPE html
htmlheadmeta charsetUTF-8title跟随页面滚动的缓冲侧边栏/titlestyle#div1{width: 100px;height: 150px;background:red;position: absolute;right: 0;bottom: 0;}/stylescriptwindow.onscrollfunction(){var oDivdocument.getElementById(div1);var scrollTopdocument.documentElement.scrollTop || document.body.scrollTop;// oDiv.style.top(document.documentElement.clientHeight-oDiv.offsetHeight)/2scrollToppx;startMove(parseInt((document.documentElement.clientHeight-oDiv.offsetHeight)/2scrollTop)); //通过运动框架慢慢走不会出现闪烁问题了,因为除2可能出现0.5所以要取整才不会出现抖动};var timernull;function startMove(iTarget){var oDivdocument.getElementById(div1);clearInterval(timer);timersetInterval(function(){var speed(iTarget-oDiv.offsetTop)/4;speedspeed0?Math.ceil(speed):Math.floor(speed); //向上取整和向下取整if(oDiv.offsetTopiTarget){clearInterval(timer);}else{oDiv.style.topoDiv.offsetTopspeedpx;}},30);}/script/headbody styleheight: 2000px;input typetext idtxt1 /div iddiv1/div/body
/html 4.关于ie6是不支持设置border或图片或其他标签的first-child和last-child伪类问题例如我们时常要设置border-right的最后一个border为0但ie6是不认所谓的first-child和last-child的怎么办呢所以我们要另外找办法解决这个问题了。如果想改变第一个或最后一个标签的样式用css的expression在样式中加入 previousSibling 或 nextSibling 就可以了。eg li a{*margin-left:expression(this.previoussiblingnull?0:20px); border-right-width:0px;border-right-style:solid;border-color:#DAD3D0;*border-right-width:expression(this.nextSiblingnull?none:0px); *background-image:expression(this.nextSiblingnull?none:none); } //以上分别是让第一个a标签margin-left20px让最后一个a标签的border-right:0没有右边框让最后一个a标签的background-image:none;没有背景图片。 不怎么清楚的可以往下看比较详细 #sidebar li:first-child{border-top-style:none;}#sidebar li{border-top-width:1px;border-top-style:solid;border-color:#DAD3D0;*border-top-style:expression(this.previousSiblingnull?none:solid);}代码解析 *border-top-style:expression(this.previousSiblingnull?’none’:solid’); 只有IE6和IE7能识别此行代码第一个值’none’就是first-child的值第二个值’solid’则是其他元素的值。 last-child原理相同代码如下 #sidebar li:last-child{border-bottom-style:none;}#sidebar li{border-bottom-width:1px;border-bottom-style:solid;border-color:#DAD3D0;*border-bottom-style:expression(this.nextSiblingnull?none:solid);} 我们希望在每条记录之间加上分隔符一般会加border-bottom属性但是最后一个li下面不能有我们可以使用lili选择符改用border-top属性即可实现。 lili{border-top: 1px dotted #999;} 试过真的有效的方法在IE6下去掉border-right边框的显示#nav .type:last-child { border:0;}#nav .type{border-right-width:0px;border-right-style:solid;border-color:#DAD3D0;*border-right-width:expression(this.nextSiblingnull?none:0px);} 5.写ul列表时要注意css写法不然在其他浏览器显示正常在ie6下如果li里面的a标签内容超出就会往下掉了,要设置宽度 eg:display:block;float:left;width:474px;。 head
style
#focus .hot-news .newslist { padding:5px 0;width:530px;overflow:hidden;text-overflow:ellipsis;*padding-bottom:expression(this.nextSiblingnull?0:0);}
#focus .hot-news .newslist:last-child { padding-bottom:0;}
#focus .hot-news .newslist li { height:29px; font-size:16px; line-height:29px; color:#333; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;positi on:relative; }
#focus .hot-news .newslist li .channel { display:block; float:left; width:46px; height:20px; margin:5px 10px 5px 0; font-size:14px; line-height:20px; color: #06c; text-align:center; background:#dde9fa; border-radius:5px;}
#focus .hot-news .newslist li a {display:block;float:left;width:474px; color:#333;text-overflow:ellipsis; white-space:nowrap;overflow:hidden;}
#focus .hot-news .newslist li a:hover { text-decoration:underline;}
/style
/head
bodydiv classhot-newsul classnewslistlia href# classchannel爱车/aa href# title 潮味十足汕头公交候车亭换上文化装 你见了吗 style潮味十足汕头 公交候车亭换上文化装 你见了吗/a/lilia href# classchannel美食/aa href# title一道颜色好看又简单好做的三杯鸡便当 适合新手们学学 style一道颜色好看又简单好做的 三杯鸡便当 适合新手们学学/a/li lia href# classchannel旅游/aa href# title蓝天白云加阳光明媚 海天一色连成一体送来冬天的消息 style蓝天白云加阳光明媚 海天 一色连成一体送来冬天的消息/a/lilia href# classchannel校园/aa href# title学生创业创新大舞台 i创业#183;校园创新营销大赛启动 style学生创业创新大 舞台i创业·校园创新营销大赛启动/a/lilia href# classchannel爱车/aa href# title12月1日新开第58路公交南翔公交总站开往广厦新城 style12月1日新开第58路公交南 翔公交总站开往广厦新城/a/lilia href# classchannel房产/aa href# title星湖城纠纷新进展~小区电梯故障排除消防全方位整改 style星湖城纠纷新进展~小区电梯 故障排除消防全方位整改/a/li/ul/div
/body 以下是网上针对ie6的一些常用解决方法6.文本重复Bug 在IE6中一些隐藏的元素如注释、display:none;的元素被包含在一个浮动元素里就有可能引发文本重复bug。解决办法给浮动元素添加 display:inline;。 7.IE6调整窗口大小的 Bug 当把body居中放置改变IE浏览器大小的时候任何在body里面的相对定位元素都会固定不动了。解决办法给body定义position:relative;就行了。 8.垂直列表间隙bug 当我们使用li 包含一个块级子元素时IE6(IE7也有可能)会错误地给每条列表元素li之间添加空隙。 解决方法把aflaot并且清除float来解决这个问题另外一个办法就是触发a的hasLayout如定 义高宽、使用zoom:1;也可以给li 定义 display:inline;来解决此问题另外还有一个极有趣的方法给包含的文本末尾添加一个空格。 9.列表阶梯bug 列表阶梯bug通常会在给li的子元素a使用float:left;时触发我们本意是要做一个横向的列表(通常 是导航栏)但IE却可能呈现出垂直的或者阶梯状。 解决办法就是给li定义float:left;而非子元素a或者 给li定义display:inline;也可以解决。 10.横向列表宽度bug 如果你使用float:left;把li横向摆列并且li内包含的a或其他触发了 hasLayout在IE6下就会有错误的表现。解决方法很简单只需要给a定义同样的float:left;即可。 11.Overflow Bug 在IE6/7中overflow无法正确的隐藏有相对定位position:relative;的子元素。解决方法就是给外包容器.wrap加上position:relative;。 12.IE下z-index的bug 在IE浏览器中定位元素的z-index层级是相对于各自的父级容器所以会导致z-index出现错误的表现。解决方法是给其父级元素定义z-index有些情况下还需要定义position:relative。 13.绝对定位元素的1像素间距bug IE6下的这个错误是由于进位处理误差造成IE7已修复当绝对定位元素的父元素高或宽为奇数时bottom和right会产生错误。唯一的解决办法就是给父元素定义明确的高宽值但对于液态布局没有完美的解决方法。 14.3像素间距bug 在IE6中当文本(或无浮动元素)跟在一个浮动的元素之后文本和这个浮动元素之间会多出3像素的间隔。 给浮动层添加 display:inline 和 -3px 负值margin 给中间的内容层定义 margin-right 以纠正-3px 15.躲猫猫bug 在IE6和IE7下躲猫猫bug是一个非常恼人的问题。一个撑破了容器的浮动元素如果在他之后有不浮动的内容并且有一些定义了:hover的链接当鼠标移到那些链接上时在IE6下就会触发躲猫猫。 解决方法很简单 1.在那个未浮动的内容之后添加一个span styleclear: both; /span 2.触发包含了这些链接的容器的hasLayout一个简单的方法就是给其定义height:1%; 16.浮动层错位 当内容超出外包容器定义的宽度时在IE6中容器会忽视定义的width值宽度会错误地随内容宽度增长而增长。 浮动层错位问题在IE6下没有真正让人满意的解决方法虽然可以使用overflow:hidden;或overflow:scroll;来修正 但hidden容易导致其他一些问题 scroll会破坏设计JavaScript也没法很好地解决这个问题。所以建议是一定要在布局上避免这个问题发 生使用一个固定的布局或者控制好内容的宽度给内层加width。 17.清除浮动 如果你想用div(或其他容器)包裹一个浮动的元素你会发现必须给div(容器)定义明确的height、width、overflow之中一个属性除了auto值才能将浮动元素严实地包裹。 代码#container {border:1px solid #333; overflow:auto; height:100%;} #floated1 {float:left; height:300px; width:200px; background:#00F;} #floated2 {float:right; height:400px; width:200px; background:#F0F;} 18.双边距Bug 当元素浮动时IE6会错误的把浮动方向的margin值双倍计算。个人觉得较好解决方法是避免float和margin同时使用。 19.最小高度 IE6 不支持min-height属性但它却认为height就是最小高度。解决方法使用ie6不支持但其余浏览器支持的属性!important。#container {min-height:200px; height:auto !important; height:200px;} 20.最大高度 //直接使用ID来改变元素的最大高度 var container document.getElementById(container); container.style.height (container.scrollHeight 199) ? 200px : auto; //写成函数来运行 function setMaxHeight(elementId, height){ var container document.getElementById(elementId); container.style.height (container.scrollHeight (height - 1)) ? height px : auto; } //函数示例 setMaxHeight(container1, 200); setMaxHeight(container2, 500); 21.100% 高度 在IE6下如果要给元素定义100%高度必须要明确定义它的父级元素的高度如果你需要给元素定义满屏的高度就得先给html和body定义height:100%;。 22.最小宽度 同max-height和max-width一样IE6也不支持min-width。 //直接使用ID来改变元素的最小宽度 var container document.getElementById(container); container.style.width (container.clientWidth width) ? 500px : auto; //写成函数来运行 function setMinWidth(elementId, width){ var container document.getElementById(elementId); container.style.width (container.clientWidth width) ? width px : auto; } //函数示例 setMinWidth(container1, 200); setMinWidth(container2, 500); 23.最大宽度//直接使用ID来改变元素的最大宽度 var container document.getElementById(elementId); container.style.width (container.clientWidth (width - 1)) ? width px : auto; //写成函数来运行 function setMaxWidth(elementId, width){ var container document.getElementById(elementId); container.style.width (container.clientWidth (width - 1)) ? width px : auto; } //函数示例 setMaxWidth(container1, 200); setMaxWidth(container2, 500); 24.IE6下的圆角 IE6不支持CSS3的圆角属性性价比最高的解决方法就是用图片圆角来替代或者放弃IE6的圆角。 25.子级中有设置position则父级overflow失效 解决方法为父级设置position:relative 26.position下的leftbottom错位 解决方法为父级(relative层)设置宽高或添加*zoom:1 27.块元素中有文字及右浮动的行元素行元素换行 解决方法将行元素置于块元素内的文字前 28.li之间会有间距 解决方法float: left; 29.img于块元素中底边多出空白 解决方法父级设置overflow: hidden; 或 img { display: block; } 或 _margin: -5px; 30.左浮元素margin-bottom失效 解决方法显示设置高度 or 父标签设置_padding-bottom代替子标签的margin-bottom or 再放个标签让父标签浮动子标签 margin- bottom即(margin-bottom与float不同时作用于一个标签) 31.标签高度无法小于19px 解决方法overflow: hidden; 32.行标签之间会有一小段空白 解决方法float或结构并排(可读性差不建议) 33.line-height默认行高bug 解决方法line-height设值 34.内部盒模型超出父级时父级被撑大 解决方法父标签使用overflow:hidden 35.以下三种其实是同一种bug其实也不算是个bug举个例子父标签高度20子标签11垂直居中20-1199要分给文字的上面与下面怎么分IE6就会与其它的不同所以尽量避免。 1字体大小为奇数之边框高度少1px 解决方法字体大小设置为偶数或line-height为偶数 2line-height文本垂直居中差1px 解决方法padding-top代替line-height居中或line-height加1或减1 3与父标签的宽度的奇偶不同的居中造成1px的偏离 解决方法如果父标签是奇数宽度则子标签也用奇数宽度;如果是父标签偶数宽度则子标签也用偶数宽度 36.IE6怪异解析之padding与border算入宽高 原因未加文档声明造成非盒模型解析 解决方法加入文档声明!doctype html 另外补充一点知识 DIVCSS星号*常常我们在DIVCSS布局的时候会遇到2处使用星号“*”,一个为以星号*没有命名名称的CSS选择器另外一个是在CSS选择器里以*开头的CSS属性单词样式-CSS 星号-CSS *知识介绍1.CSS星号*选择器*{ padding:0; margin:0; font-family:黑体}这里的“*”号是通配符即指网页html中所有标签成员的css样式为padding为0margin为0,字体为黑体 。2.CSS选择器内以(*)星号开头CSS单词.divcss5{border:1px solid #000;width:220px;*width:300px;}经过各大浏览器测试我们会发现在IE6和IE7中宽度为300px而在IE8及以上MSIE版本、谷 歌浏览器、火狐(FF)浏览器却显示为220px宽度。在CSS选择器内星号CSS样式属性单词一般区别IE6和IE8、IE6和FFIE7和IE8IE7和FF浏览器之间属性CSS HACK。什么是css hack ? css hack是什么简单地讲css hack指各版本及各品牌浏览器之间对CSS解释后出现网页内容的兼容bug误差(比如我们常说错位)的处理。由于各浏览器的内核不同所以会造成一些误差就像JS一样一个JS网页特效在微软IE6、IE7、IE8浏览器有效果但可能在火狐Mozilla Firefox谷歌 浏览器无效这样就叫做JS hack 所以我们对于CSS来说他们来解决各浏览器对CSS解释不同所采取的区别不同浏览器制作不同的CSS样式的设置来解决这些问 题就叫作CSS Hack。CSS hack之区别不同浏览器的写法我们在开发DIVCSS页面时候常常会遇到开发出的网页的一些地方在各大浏览器比如微软IE6、微软IE7、微软IE8、火狐浏览器、谷歌浏览器有一些不同如宽 度、高度等地方有相差误。IE6比较老的版本浏览器用户比较多IE7较新浏览器更接近标准浏览器IE8算是微软标准浏览器但差别于浏览器火狐Mozilla, Firefox和谷歌浏览器chrome是比较标准的IE浏览器一般我们以这个浏览器为开发参考平台同时IE8与这两个浏览器解释CSS比较接 近一般只要通过火狐、谷歌浏览器测试兼容一般就能确定IE8.因此一般我们区别这些浏览器CSS hack的方法就变得简单我们只需考虑IE6\IE7\火狐Firefox这3个浏览器即可兼容全部浏览器。具体区别如下区别IE6与FFbackground:orange;*background:blue;区别IE6与IE7background:green !important;background:blue;区别IE7与FFbackground:orange; *background:green;区别FFIE7IE6background:orange;*background:green !important;*background:blue;注IE都能识别*;标准浏览器(如FF)不能识别*IE6能识别*但不能识别 !important,IE7能识别*也能识别!important;FF不能识别*但能识别!important;以下是各浏览器CSS hack表格 IE6 IE7 FF* √ √ ×!important × √ √ 另外再补充一个下划线_,IE6支持下划线IE7和firefox均不支持下划线。于是大家还可以这样来区分IE6IE7firefox: background:orange;*background:green;_background:blue;注不管是什么方法书写的顺序都是firefox的写在前面IE7的写在中间IE6的写在最后面。假如我们设置一个类名为exple的类CSS属性,CSS样式边框为1PX黑色边框高度为100PX并要求在IE6浏览器下宽度为100PXIE7浏览器宽度下为150PX火狐 IE8谷歌浏览器下宽度为200PX(PX是长度单位像素)则CSS代码如下.exple{border:1px solid #000; height:100px;width:200px; *width:150px !important; *width100px;}这样只要在html设置一个div的类(classexple),这样这部分在火狐、IE8、谷歌浏览器下就会显示宽度为200px高度为100px带1px的黑边框的方块IE7浏览 器宽度下为150PX高度为100px带1px的黑边框的方块在IE6浏览器下就会显示出长度和宽度为100px的带1px黑边的正方形。http://www.divcss5.com/css-hack/c23.shtml转载于:https://www.cnblogs.com/xfx0725/p/6214686.html
