|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。
破洛洛搜集的各类CSSbug与技能延续更新来历:破洛洛
1、容器不扩大成绩
这个是常常在我切图的时分碰到的成绩，如：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>容器不扩大成绩(www.poluoluo.com破洛洛)</title><styletype="text/css">#divGroup{border:2pxsolid#333;}#a,#b{border:2pxsolid#333;float:left;margin:5px;}</style></head><body><divid="divGroup"><divid="a">子容器a</div><divid="b">子容器b</div></div></body></html>
提醒：你能够先修正部分代码再运转。
办理举措：在divGroup内里加上overflow:hidden;zoom:1;
ps:良多人都是在内里加个扫除浮动空标签来办理，实在这个是毛病举措。太增添代码量了
2、margin双边距成绩
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>FF下怎样使一连长字段主动换行(www.poluoluo.com破洛洛)</title><styletype="text/css">body{margin:0}div{float:left;margin-left:10px;width:200px;height:200px;border:1pxsolidred}</style></head></script><body><div><ahref="#">www.poluoluo.com破洛洛www.poluoluo.com破洛洛www.poluoluo.com破洛洛www.poluoluo.com破洛洛</a></div></body></html>
提醒：你能够先修正部分代码再运转。
设置为float的div在ie下设置的margin会更加。这是一个ie6都存在的bug。
办理举措是在这个div内里加上display:inline;
ps:我一样平常很罕用margin，一样平常情形用padding来把持边距，以避免呈现别的的bug
3、关于容器的包容干系
良多时分，特别是容器内有平行结构，比方两、三个float的div时，宽度很简单呈现成绩。在IE中，外层的宽度会被内层更宽的div挤破。必定要用Photoshop大概Firework量取像素级的精度。
4、关于高度的成绩
假如是静态地增加内容，高度最好不要界说。扫瞄器能够主动伸缩，但是假如是静态的内容，高度最好定好。（仿佛偶然候不会主动往下撑开，不晓得详细怎样回事
5、最狠的手腕C!important;
假如其实没有举措办理一些细节成绩,能够用这个办法.FF关于”!important”会主动优先剖析,但是IE则会疏忽.以下
<LIclass=hl-firstline>.tabd1{
- background:url(/res/images/up/tab1.gif)no-repeat0px0px!important;/*StyleforFF*/
- background:url(/res/images/up/tab1.gif)no-repeat1px0px;/*StyleforIE*/}
值得注重的是，必定要将xxxx!important这句安排在另外一句之上。
6、IE6躲猫猫bug
<!DOCTYPEhtmlpublic"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>躲猫猫bug(www.poluoluo.com破洛洛)</title><styletype="text/css">#holder{background-color:pink;/***引发bug的主要要素，一种注释就是：那些消散的笔墨躲到了背景以后***//***width:100%;对最年夜的容器设置宽度，绝对宽度和相对宽度都能够，便可修改bug***/}#holdera:hover{background-color:deeppink;/***为了加强视觉效果罢了，能够往失落。***/}#floater{float:right;/***引发bug的主要要素***/width:135px;height:310px;/***引发bug的主要要素，高度必定要年夜于那些笔墨的高度***/border:1pxsolidgreen;}.clear{clear:both;/***引发bug的主要要素***/}#footer{/***为了加强视觉效果罢了，能够往失落。***/height:50px;border-top:1pxsolidblue;}</style></head><body><divid="holder"><divid="floater">躲猫猫bug<br//><ahref="#"title="">这个示例是为了演示IE6的“躲猫猫bug”，假如你用IE6扫瞄器扫瞄这个页面的时分，就会发明你看不到这些字了rz~。<br//>IE7已修改了这个bug，以是你用IE7扫瞄这个页面的时分，就可以看到这些笔墨啦。<br//>躲猫猫bug躲猫猫bug躲猫猫bug躲猫猫bug躲猫猫bug躲猫猫b躲猫猫b躲猫猫bugug躲猫猫bug躲猫猫bug躲猫猫bug躲猫猫bug躲猫猫bug躲猫猫bug躲猫猫bug躲猫猫b躲猫猫bug躲猫猫bug躲猫猫bugug躲猫猫bug躲猫猫bug躲猫猫bug躲猫猫bug<ulstyle="list-style-type:disc"><li><atitle="躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu"href="#">躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu</a></li><li><atitle="躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu"href="#">躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu</a></li><li><atitle="躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu"href="#">躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu</a></li><li><atitle="躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu"href="#">躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu</a></li><li><atitle="躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu"href="#">躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu</a></li><li><atitle="躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu"href="#">躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu</a></li></ul></div><!--end:ghostHolder--><divclass="clear"></div><divid="footer"></div></div><!--end:holder--></body></html>
提醒：你能够先修正部分代码再运转。
<P>上面办法的恣意一种便可没落bug：
1.明白的指定最表面div容器（#holder）的宽度（绝对宽度和相对宽带都能够）。
2.往失落最表面div容器（#holder）的背景色彩（大概背景图片）
3.减少浮动div容器（#floater）的高度到必定水平
4.不浮动div容器（#floater）
5.不利用<divclass="clear"><div>
手艺
7、ie6下空标签高度成绩
一个空div假如高度设置为0到19px，IE6下高度默许一直19PX。
比方：
.c{background-color:#f00;height:0px;/*给定任何小于20px的高度*/}
<divclass="c"></div>
运转：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>ie6下line-heightbug(www.poluoluo.com破洛洛)</title><style>.c{background-color:#f00;height:0px;/*给定任何小于20px的高度*/}</style></head><body><divclass="c"></div></body></html>
提醒：你能够先修正部分代码再运转。
<P>假如不让它默许为19PX。而是0PX的话
办理办法有3种：
1.css内里加上overflow:hidden;
2.div内里加上正文,<divclass="c"><!CC></div>
3.css内里加上line-height:0;然后div内里加上#nbsp;,
<divclass="c"></div>(#换成&)
注重：ie6下给div设置的高度小于ie6的line-height值时,ie6会将这个div的高度定为line-height的值.
8、往失落图片热门链接或超链接的虚线框
<ahref="#"onFocus=this.blur()>hemin</a>
9、按钮按下时平面感效果:
a:hover{position:relative;top:1px;left:1px}/*牢记必定如果绝对定位*/
10、整站变灰代码(加到款式表中):
html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}
11、中英文下划线对齐体例(使用图片的align=”absmiddle”):
<imgsrc="img.gif"align="absmiddle">中英文并排:<ahref="/">中文gollum</a>
12、设为首页代码:
<spanonclick="varstrHref=window.location.href;this.style.behavior=’url(#default#homepage)’;this.setHomePage(’http://www.poluoluo.com破洛洛’);"style="cursor:pointer">设为首页</span>
13、到场保藏代码:
<LIclass=hl-firstline><script>
- functionaddfavorite()
- {
- if(document.all)
- {
- window.external.addFavorite(‘http://www.poluoluo.com‘,‘破洛洛‘);
- }
- elseif(window.sidebar)
- {
- window.sidebar.addPanel(‘破洛洛‘,‘http://www.poluoluo.com‘,"");
- }
- }
- </script>
- <ahref="#">把破洛洛到场保藏</a>
14、经由过程界说em完成小三角效果:
<LIclass=hl-firstline>*{
- font-size:14px;/*必需通配字体巨细*/
- }
- em{
- display:block;
- font:0/0"宋体";/*经自己探索,只要在宋体下才最为尺度*/
- border:7pxsolid;/*border值越年夜,三角形越年夜*/
- border-color:#fff#fff#fff#444;/*经由过程改动色彩值,可发生分歧效果,本人实行*/
- margin-top:5px
- }
15、IE6下当层上下于10px时,会呈现高度在界说值上加10px的效果,最复杂的办法就是在该层款式中到场:
font-size:0;
16、空div在IE(FF中没有)是有默许高度的,能够用界说:
div{width:100%;background:#9c0;ling-height:0}
17、描边笔墨效果:
<LIclass=hl-firstline><divstyle="position:relative;width:200px;height:25px;line-height:25px;text-align:center;font-size:14px;color:#fff;background:#9c0;">
- 这是描边笔墨<spanstyle="position:absolute;left:-1px;top:-1px;color:#444;width:200px;height:25px;display:block">这是描边笔墨</span>
- </div>
18、input鼠标经由时改动色彩:
input{star:expression(onmou搜索引擎优化ver=function(){this.style.backgroundColor=”#FF0000″},onmou搜索引擎优化ut=function(){this.style.backgroundColor=”#FFFFFF”})}
19、图片在容器里垂直居中显现:
img{margin-top:expression((150Cthis.height)/2);}//150是容器高
20、超链接会见事后hover款式就不呈现的成绩:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>超链接会见事后hover款式就不呈现的成绩(www.poluoluo.com破洛洛)</title><styletype="text/css"><!--a:link{color:red}a:hover{color:blue}a:visited{color:green}a:active{color:orange}--></style></head><body><ahref="#">www.poluoluo.com破洛洛--www.poluoluo.com破洛洛</a></body></html>
提醒：你能够先修正部分代码再运转。
ps:被点击会见过的超链接款式不在具有hover和active了,良多人应当都碰到过这个成绩，办理办法是改动CSS属性的分列按次:L-V-H-A
21、FF下怎样使一连长字段主动换行:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>FF下怎样使一连长字段主动换行(www.poluoluo.com破洛洛)</title><styletype="text/css"><!--div{width:300px;word-wrap:break-word;border:1pxsolidred;}--></style></head><scripttype="text/javascript">/*<![CDATA[*/functiontoBreakWord(intLen){varobj=document.getElementById("ff");varstrContent=obj.innerHTML;varstrTemp="";while(strContent.length>intLen){strTemp+=strContent.substr(0,intLen)+"";strContent=strContent.substr(intLen,strContent.length);}strTemp+=""+strContent;obj.innerHTML=strTemp;}if(document.getElementById&&!document.all)toBreakWord(37)/*]]>*/</script><body><divid="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></body></html>
提醒：你能够先修正部分代码再运转。
ps:尽人皆知IE中间接利用word-wrap:break-word就能够了,这里FF中我们利用JS拔出的办法来办理
22、IE6下为何图片下方有清闲发生:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>IE6下为何图片下方有清闲发生(www.poluoluo.com破洛洛)</title><styletype="text/css"><!--div{border:1pxsolidred;background:orange;}img{width:276px;height:110px;}--></style></head></script><body><div><imgsrc="http://www.poluoluo.com/jzxy/UploadFiles_333/200911/20091118142231288.gif"alt="google"/></div></body></html>
提醒：你能够先修正部分代码再运转。
ps:办理这个BUG的办法也有良多，能够是改动html的排版，大概设置img为display:block
大概设置vertical-align属性为vertical-align:top|bottom|middle|text-bottom
都能够办理.
23、IE6下这两个层两头怎样有间隙:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>IE6下这两个层两头怎样有间隙(www.poluoluo.com破洛洛)</title><styletype="text/css"><!--.left{float:left;width:100px;height:100px;background:red}.right{width:100px;height:100px;background:orange}--></style></head></script><body><divclass="left">aaaaaa</div><divclass="right">aaaaaa</div></body></html>
提醒：你能够先修正部分代码再运转。
ps:这个IE的3PXBUG也是常常呈现的，办理的举措是给.right也一样浮动float:left大概绝对IE6界说.leftmargin-right:-3px;
24、list-style-image没法正确定位的成绩:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>ist-style-image没法正确定位的成绩(www.poluoluo.com破洛洛)</title><styletype="text/css"><!--li{list-style:url("http://www.poluoluo.com/jzxy/UploadFiles_333/200911/20091118142231311.gif");}lia{position:relative;top:-5px;font:12px/25px宋体;}--></style></head></script><body><ul><li><ahref="#">web尺度罕见成绩年夜全</a></li><li><ahref="#">web尺度罕见成绩年夜全</a></li><li><ahref="#">web尺度罕见成绩年夜全</a></li><li><ahref="#">web尺度罕见成绩年夜全</a></li><li><ahref="#">web尺度罕见成绩年夜全</a></li></ul></body></html>
提醒：你能够先修正部分代码再运转。
ps:这个list-style-image的定位成绩也是常常有人问的，办理的举措通常为用li的背景摹拟，这里接纳绝对定位的办法也能够办理
25、怎样对齐文本与文本输出筐:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>怎样对齐文本与文本输出筐(www.poluoluo.com破洛洛)</title><styletype="text/css"><!--input{width:200px;height:30px;border:1pxsolidred;}--></style></head></script><body><inputtype="text"/>aaaaaaaaaaaaaaaaaa</body></html>
提醒：你能够先修正部分代码再运转。
ps:碰到此种成绩，设置文本框的vertical-align:middle就能够了
26、为何web尺度中IE没法设置转动条色彩了:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>为何web尺度中IE没法设置转动条色彩了(www.poluoluo.com破洛洛)</title><styletype="text/css"><!--body{scrollbar-face-color:#f6f6f6;scrollbar-highlight-color:#fff;scrollbar-shadow-color:#eeeeee;scrollbar-3dlight-color:#eeeeee;scrollbar-arrow-color:#000;scrollbar-track-color:#fff;scrollbar-darkshadow-color:#fff;}--></style></head></script><body><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></body></html>
提醒：你能够先修正部分代码再运转。
ps:办理举措是将body换成html
27、怎样才干让层显现在Flash之上呢:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>怎样才干让层显现在FLASH之上呢(www.poluoluo.com破洛洛)</title><styletype="text/css"><!--div{position:absolute;top:20px;left:20px;width:200px;height:200px;background:red}object{width:500px;height:100px;}--></style></head></script><body><div>www.poluoluo.com破洛洛</div><objecttype="application/x-shockwave-flash"data="http://gg.blueidea.com/2005/www/m533-104.swf"><paramname="movie"value="http://gg.blueidea.com/2005/www/m533-104.swf"/></object></body></html>
提醒：你能够先修正部分代码再运转。
ps:办理的举措是给FLASH设置通明
<paramname="wmode"value="transparent"/>
28、如何使一个层垂直居中于扫瞄器中:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>如何使一个层垂直居中于扫瞄器中(www.poluoluo.com破洛洛)</title><styletype="text/css"><!--div{position:absolute;top:50%;left:50%;margin:-100px00-100px;width:200px;height:200px;border:1pxsolidred;}--></style></head></script><body><div>www.poluoluo.com破洛洛</div></body></html>
提醒：你能够先修正部分代码再运转。
ps:这里我们利用百分比相对定位，与外补钉负值的办法，负值的巨细为其本身宽度高度除以二
29、纵贯到屏幕底部的背景致:
在垂直偏向是举行把持是CSS所不克不及的。假如你想让导航栏和内容栏一样纵贯到页面底部，用表格是很便利的，但假如只用如许的CSS：
#navigation{background:blue;width:150px}
较短的导航条是不会纵贯究竟部的，半路内容停止时它就停止了。该怎样办呢？
不幸的是，只能接纳棍骗的手腕了，给这较短的一栏加上个背景图，宽度和栏宽一样，并让它的色彩和设定的背景致一样。
body{background:url(blue-image.gif)00repeat-y}
此时不克不及用em做单元，由于那样的话，一旦读者改动了字体巨细，这个把戏就会露馅，只能利用px。
30、CSS通明属性:
.transparent_class{
filter:alpha(opacity=50);/*;这个是为IE6设的，可取值在0-100，别的三个0到1.*/
-moz-opacity:0.5;/*这个是为了撑持一些老版本的Mozilla扫瞄器。*/
-khtml-opacity:0.5;/*这个为了撑持一些老版本的Safari扫瞄器。*/
opacity:0.5;/*opacity:0.5;这是最主要的，由于它是CSS尺度.该属性撑持Firefox,Safari和Opera.*/
}
31、CSS字体属性简写划定规矩
一样平常用CSS设定字体属性是如许做的：
<LIclass=hl-firstline>font-weight:bold;
- font-style:italic;
- font-varient:small-caps;
- font-size:1em;
- line-height:1.5em;
- font-family:verdana,sans-serif;
但也能够把它们全体写到一行上往：
font:bolditalicsmall-caps1em/1.5emverdana,sans-serif;
真不错！只要一点要提示的：这类简写办法只要在同时指定font-size和font-family属性时才起感化。并且，假如你没有设定font-weight,font-style,和font-varient，他们会利用缺省值，这点要记上。
32、修改IE6反复笔墨bug:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>修改IE6反复笔墨bug(www.poluoluo.com破洛洛)</title><styletype="text/css">*{margin:0;padding:0;}body{font:12pxVerdana,Geneva,sans-serif;padding:10px;}.box-model{width:300px;}.box-modeldiv{float:left;width:150px;}</style></head><body><divclass="box-model"><divclass="box-model-01">反复笔墨：</div><divclass="box-model-02clearfix">必要你我是一只鱼</div></div></body>
提醒：你能够先修正部分代码再运转。
办理办法：
#往失落正文
#确保一切的元素利用”display:inline;”
#在最初一个元素上利用一个”margin-right:-3px;”
#为浮动元素的最初一个条目利用一个前提正文，好比：
<!C[if!IE]>Putyourcommentaryinhere…<![endif]C>
#在容器的最初元素利用一个空的div(它也有需要设置宽度为90%或相似宽度。)
原文:www.positioniseverything.net
33、IE6下:hover生效成绩办理计划:
a:hover{zoom:1}/*增添zoom,display,padding等等属性也可*/
34、IE6,7生效的margin-left/rightbug:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>IE6,7生效的margin-left/right</title><style>.wrap{background:#eee;border:1pxsolid#ccc;}.cont{border-bottom:2pxsolid#aaa;margin:0100px;height:30px;}</style></head><body><divclass="wrap"><divclass="cont">www.poluoluo.com破洛洛</div></div></body></html>
提醒：你能够先修正部分代码再运转。
办理举措:在wrap加zoom:1;
转：http://www.cssass.com/blog/index.php/2009/350.html/comment-page-1#comment-128
35、单行或多行一直笔墨垂直居中:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title>多行笔墨垂直居中(www.poluoluo.com破洛洛)</title><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><style>*{padding:0;margin:0;}.a{display:table-cell;/*ff*/text-align:center;width:400px;height:200px;line-height:200px;font-size:175px;/*IE6,7*/border:4pxsolid#beceeb;color:#069;vertical-align:middle;}.b{display:inline-block;font-size:12px;vertical-align:middle;text-align:center;line-height:10px;width:100px;}</style></head><body><divclass="a"><spanclass="b">heminwww.poluoluo.com破洛洛</span></div></body></html>
提醒：你能够先修正部分代码再运转。
36、进进网页到场渐显切换效果:
<metahttp-equiv="Page-Enter"content="blendTrans(Duration=1)"/>
<metahttp-equiv="Page-Exit"content="blendTrans(Duration=1)"/>
<ahref="http://www.poluoluo.com破洛洛">hemin</a>
37、IE6下英笔墨体跟中笔墨体不克不及对齐:
办理举措：中英文都一致利用“宋体”。
Table布局灵活性不大，你只能遵循tabletrtd的格式。而div你可以divulli也可以olli还可以ulli……但标准语法最好有序的写。 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-15 23:33:07
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
窥视卡
雷达卡
发表于 2015-2-1 16:06:04