display:none是假定没有这个组件,visibility:hidden是不呈现。 一个实例文件: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>fddd</title> <mce:style type="text/css"><!-- div{border:1px #333 solid;} #bleft{float:left;} #bright{float:right;} #c1,#c2,#c3,#c4,#c5{background-color:#0099FF; width:150px;height:50px; display:;border:1px #000 solid;margin:10px auto;text-align:center;font:20px bold;line-height:1.5em} --></mce:style><style type="text/css" mce_bogus="1">div{border:1px #333 solid;} #bleft{float:left;} #bright{float:right;} #c1,#c2,#c3,#c4,#c5{background-color:#0099FF; width:150px;height:50px; display:;border:1px #000 solid;margin:10px auto;text-align:center;font:20px bold;line-height:1.5em}</style> <mce:script type="text/javascript"><!-- function hided(divID){ document.getElementById(divID).style.display="none"; } function showd(divID){ document.getElementById(divID).style.display=""; } function hidee(divID){ document.getElementById(divID).style.visibility="hidden"; } function showe(divID){ document.getElementById(divID).style.visibility=""; } // --></mce:script> </head> <body> <div id="bleft"> <p><pre>display:none的效果</pre></p> <button type="button" value="hide" οnclick="hided('c1')">hide1</button> <button type="button" value="hide" οnclick="hided('c2')">hide2</button> <button type="button" value="hide" οnclick="hided('c3')">hide3</button> <button type="button" value="hide" οnclick="hided('c4')">hide4</button> <button type="button" value="hide" οnclick="hided('c5')">hide5</button><br /> <button type="button" value="show" οnclick="showd('c1')">show1</button> <button type="button" value="show" οnclick="showd('c2')">show2</button> <button type="button" value="show" οnclick="showd('c3')">show3</button> <button type="button" value="show" οnclick="showd('c4')">show4</button> <button type="button" value="show" οnclick="showd('c5')">show5</button> </div> <div id="bright"> <p><pre>visibility:hidden的效果</pre></p> <button type="button" value="hide" οnclick="hidee('c1')">hide1</button> <button type="button" value="hide" οnclick="hidee('c2')">hide2</button> <button type="button" value="hide" οnclick="hidee('c3')">hide3</button> <button type="button" value="hide" οnclick="hidee('c4')">hide4</button> <button type="button" value="hide" οnclick="hidee('c5')">hide5</button><br /> <button type="button" value="show" οnclick="showe('c1')">show1</button> <button type="button" value="show" οnclick="showe('c2')">show2</button> <button type="button" value="show" οnclick="showe('c3')">show3</button> <button type="button" value="show" οnclick="showe('c4')">show4</button> <button type="button" value="show" οnclick="showe('c5')">show5</button> </div> <div style="clear:both;" mce_style="clear:both;"></div> <div id="c1">box1</div> <div id="c2">box2</div> <div id="c3">box3</div> <div id="c4">box4</div> <div id="c5">box5</div> </body> </html> 去掉代码中的mce: 与注释符号。