CSS hacker

来源：互联网发布：城市规划纪录片知乎编辑：程序博客网时间：2024/05/29 09:28

1、容器不扩展问题

<!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=utf-8" /><title>容器不扩展问题(www.poluoluo.com 破洛洛)</title><style type="text/css">#divGroup{ border:2px solid #333;}#a,#b{ border:2px solid #333; float:left; margin:5px;}</style></head><body><div id="divGroup">    <div id="a">子容器a</div>    <div id="b">子容器b</div></div></body></html>

解决办法：在divGroup里面加上overflow:hidden;zoom:1;

2、margin双边距问题

<!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=utf-8" /><title>FF下如何使连续长字段自动换行(www.poluoluo.com 破洛洛)</title><style type="text/css">body { margin:0 }div { float:left; margin-left:10px; width:200px; height:200px; border:1px solid red }</style></head></script><body><div><a href="#">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;

<a href="#" onFocus=this.blur()>hemin</a>

4、按钮按下时立体感效果:

a:hover { position:relative; top:1px; left:1px}/* 切记一定要是相对定位 */

5、整站变灰代码(加到样式表中):

html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}

6、input鼠标经过时改变颜色:

input {star : expression(onmouseover=function(){this.style.backgroundColor=”#FF0000″},onmouseout=function(){this.style.backgroundColor=”#FFFFFF”}) }

7、图片在容器里垂直居中显示:

img {margin-top: expression(( 150 – this.height ) / 2);} //150是容器高

8、IE6下为什么图片下方有空隙产生:

<!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=utf-8" /><title>IE6下为什么图片下方有空隙产生(www.poluoluo.com 破洛洛)</title><style type="text/css"><!--div { border:1px solid red; background:orange; }img { width:276px; height:110px; }--></style></head></script><body><div><img src="/jzxy/UploadFiles_333/200911/20091118142231288.gif" alt="google" /></div></body></html>

解决这个BUG的方法也有很多，可以是改变html的排版，或者设置img 为display:block
或者设置vertical-align属性为vertical-align:top | bottom |middle |text-bottom

9、 IE6下这两个层中间怎么有间隙:

<!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=utf-8" /><title>IE6下这两个层中间怎么有间隙(www.poluoluo.com 破洛洛)</title><style type="text/css"><!--.left { float:left; width:100px; height:100px; background:red }.right { width:100px; height:100px; background:orange }--></style></head></script><body><div class="left">aaaaaa</div><div class="right">aaaaaa</div></body></html>

这个IE的3PX BUG也是经常出现的，解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left margin-right:-3px;

10、list-style-image无法准确定位的问题:

<!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=utf-8" /><title>ist-style-image无法准确定位的问题(www.poluoluo.com 破洛洛)</title><style type="text/css"><!--li { list-style:url("/jzxy/UploadFiles_333/200911/20091118142231311.gif"); }li a { position:relative; top:-5px; font:12px/25px 宋体; }--></style></head></script><body><ul><li><a href="#">web标准常见问题大全</a></li><li><a href="#">web标准常见问题大全</a></li><li><a href="#">web标准常见问题大全</a></li><li><a href="#">web标准常见问题大全</a></li><li><a href="#">web标准常见问题大全</a></li></ul></body></html>

这个list-style-image的定位问题也是经常有人问的，解决的办法一般是用li的背景模拟，这里采用相对定位的方法也可以解决

11、如何对齐文本与文本输入筐:

<!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=utf-8" /><title>如何对齐文本与文本输入筐(www.poluoluo.com 破洛洛)</title><style type="text/css"><!--input { width:200px; height:30px; border:1px solid red; }--></style></head></script><body><input type="text" />aaaaaaaaaaaaaaaaaa</body></html>

遇到此种问题，设置文本框的vertical-align:middle 就可以了

12、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. */}

、去掉图片热点链接或超链接的虚线框

0 0