CSS hacker
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 >
<div >子容器a</div>
<div >子容器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;
3
<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. */
}、去掉图片热点链接或超链接的虚线框
- 上一篇 »CSS：CSS使用Tips
- 下一篇 »CSS:CSS中元素水平居中显示的方法
