CSS 中一些常见到的BUG及解决办法整理【转】
2015-06-10 07:14
609 查看
各种CSS bug与技巧
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>容器不扩展问题</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;
ps:很多人都是在里面加个清除浮动空标签来解决，其实这个是错误办法。太增加代码量了
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下如何使连续长字段自动换行</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.hemin.cnwww.hemin.cnwww.hemin.cnwww.hemin.cn
</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、最狠的手段 – !important;
如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE则会忽略.如下
1. .tabd1{
2. background:url(/res/images/up/tab1.gif)no-repeat 0px 0px !important; /*Style for FF*/
3. background:url(/res/images/up/tab1.gif)no-repeat 1px 0px; /* Style for IE */}
值得注意的是，一定要将xxxx !important
这句放置在另一句之上。
6、IE6躲猫猫bug
<!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>躲猫猫bug</title>
<style type="text/css">
#holder{
background-color:pink; /***引起bug的重要因素，一种解释就是：那些消失的文字躲到了背景之后***/
/*** width:100%; 对最大的容器设置宽度，相对宽度和绝对宽度都可以，即可修正bug ***/
}
#holder a:hover{
background-color:deeppink; /***为了增强视觉效果而已，可以去掉。***/
}
#floater{
float:right; /***引起bug的重要因素***/
width:135px;
height:310px; /***<
4000
/span>引起bug的重要因素，高度一定要大于那些文字的高度***/
border:1px solid green;
}
.clear{
clear:both; /***引起bug的重要因素***/
}
#footer{ /***为了增强视觉效果而已，可以去掉。***/
height:50px;
border-top:1px solid blue;
}
</style>
</head>
<body>
<div id="holder">
<div id="floater">
躲猫猫bug<br/ />
<a href="#" title=""><img alt="躲猫猫bug"src="http://www.baidu.com/img/logo-yy.gif" /></a>
</div><!--end: floater -->
<div id="ghostHolder">
这个示例是为了演示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
<ul style="list-style-type: disc">
<li><a title="躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu"
href="#">躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu</a>
</li>
<li><a title="躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu"
href="#">躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu</a>
</li>
<li><a title="躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu"
href="#">躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu</a>
</li>
<li><a title="躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu"
href="#">躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu</a>
</li>
<li><a title="躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu"
href="#">躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu</a>
</li>
<li><a title="躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu"
href="#">躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu</a>
</li>
</ul>
</div><!--end: ghostHolder -->
<div class="clear"></div>
<div id="footer">
</div>
</div><!--end: holder -->
</body>
</html>
下面方法的任意一种即可消灭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>
<!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下line-height bug</title>
<style>
.c{background-color:#f00;height:0px;/*给定任何小于20px的高度 */}</style>
</head>
<body>
<div class="c"></div>
</body>
</html>
如果不让它默认为19PX。而是0PX的话
解决方法有3种：
1.css里面加上overflow:hidden;
2.div里面加上注释,
<divclass="c"><!–
–></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.hemin.cn’);"style="cursor:pointer">设为首页</span>
13、加入收藏代码:
1. <script>
2. function addfavorite()
3. {
4. if (document.all)
5. {
6. window.external.addFavorite(’http://bbs.blueidea.com’,'经典论坛’);
7. }
8. else if (window.sidebar)
9. {
10. window.sidebar.addPanel(’经典论坛’,‘http://bbs.blueidea.com’, "");
11. }
12. }
13. </script>
14. <a href="#"onclick="addfavorite()">把经典论坛加入收藏</a>
14、通过定义em实现小三角效果:
1. * {
2. font-size:14px;/*
必须通配字体大小 */
3. }
4. em {
5. display:block;
6. font:0/0 "宋体";/*
经本人摸索,只有在宋体下才最为标准 */
7. border:7px solid;/* border值越大,三角形越大 */
8. border-color:#fff #fff #fff#444;/*
通过改变颜色值,可产生不同效果,自己实验 */
9. margin-top:5px
10. }
15、IE6下当层高低于10px时,会出现高度在定义值上加10px的效果,最简单的方法就是在该层样式中加入:
font-size:0;
16、空div在IE(FF中没有)是有默认高度的,可以用定义:
div { width:100%;background:#9c0; ling-height:0}
17、描边文字效果:
1. <divstyle="position:relative;
width:200px; height:25px;line-height:25px; text-align:center; font-size:14px; color:#fff;background:#9c0;">
2. 这是描边文字<span style="position:absolute;left:-1px;
top:-1px; color:#444;width:200px; height:25px; display:block">这是描边文字</span>
3. </div>
18、input鼠标经过时改变颜色:
input {star :expression(onmouseover=function(){this.style.backgroundColor=”#FF0000″},onmouseout=function(){this.style.backgroundColor=”#FFFFFF”})}
19、图片在容器里垂直居中显示:
img {margin-top:expression(( 150 – this.height ) / 2);} //150是容器高
20、超链接访问过后hover样式就不出现的问题:
<!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>超链接访问过后hover样式就不出现的问题</title>
<style type="text/css">
<!--
a:link {
color:red
}
a:hover {
color:blue
}
a:visited {
color:green
}
a:active {
color:orange
}
-->
</style>
</head>
<body>
<a href="#">
www.hemin.cn--www.hemin.cn
</a>
</body>
</html>
ps:被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题，解决方法是改变CSS属性的排列顺序:
L-V-H-A
21、FF下如何使连续长字段自动换行:
<!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下如何使连续长字段自动换行</title>
<style type="text/css">
<!--
div {
width:300px;
word-wrap:break-word;
border:1px solid red;
}
-->
</style>
</head>
<script type="text/javascript">
/* <![CDATA[ */
function toBreakWord(intLen){
var obj=document.getElementById("ff");
var strContent=obj.innerHTML;
var strTemp="";
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下为什么图片下方有空隙产生:
<!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下为什么图片下方有空隙产生</title> <style type="text/css"><!-- div { border:1px solid red; background:orange; } img { width:276px;height:110px; } --> </style> </head> </script><body> <div>
<imgsrc="http://www.google.com/intl/en_ALL/images/logo.gif"alt="google" /> </div> </body> </html>
ps:解决这个BUG的方法也有很多，可以是改变html的排版，或者设置img
为display:block；
或者设置vertical-align属性为vertical-align:top | bottom|middle |text-bottom
都可以解决.
23、 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下这两个层中间怎么有间隙</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>
ps:这个IE的3PX BUG也是经常出现的，解决的办法是给.right也同样浮动
float:left 或者相对IE6定义.left margin-right:-3px;
24、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无法准确定位的问题</title>
<style type="text/css">
<!--
li {
list-style:url("http://bbs.blueidea.com/attachments/2006/11/10/arrowb_kJrcZheJmiIF.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>
ps:这个list-style-image的定位问题也是经常有人问的，解决的办法一般是用li的背景模拟，这里采用相对定位的方法也可以解决
25、web标准中定义id与class有什么区别吗:
<!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>web标准中定义id与class有什么区别吗</title>
<style type="text/css">
<!--
#aa {
color:red
}
.aa {
color:blue
}
-->
</style>
</head>
</script>
<body>
<div id="aa" class="aa">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</body>
</html>
web标准中是不容许重复ID的,比如
div id=”aa” 不容许重复2次,而class
定义的是类,理论上可以无限重复,
这样需要多次引用的定义便可以使用他.
二.
属性的优先级问题
ID 的优先级要高于class,看上面的例子
三.
方便JS等客户端脚本，如果在页面中要对某个对象进行脚本操作，那么可以给他定义一个ID，否则只能利用遍历页面元素加上指定特定属性来找到它，这是相对浪费时间资源，远远不如一个ID来得简单.
26、如何对齐文本与文本输入筐:
<!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>如何对齐文本与文本输入筐</title>
<style type="text/css">
<!--
input {
width:200px;
height:30px;
border:1px solid red;
}
-->
</style>
</head>
</script>
<body>
<input type="text" />aaaaaaaaaaaaaaaaaa
</body>
</html>
ps:遇到此种问题，设置文本框的vertical-align:middle
就可以了
27、为什么web标准中IE无法设置滚动条颜色了:
<!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>为什么web标准中IE无法设置滚动条颜色了</title>
<style type="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
28、怎么样才能让层显示在FLASH之上呢:
<!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>怎么样才能让层显示在FLASH之上呢</title>
<style type="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.hemin.cn
</div>
<object type="application/x-shockwave-flash"data="http://gg.blueidea.com/2005/www/m533-104.swf">
<param name="movie"value="http://gg.blueidea.com/2005/www/m533-104.swf" />
</object>
</body>
</html>
ps:解决的办法是给FLASH设置透明
<paramname="wmode"value="transparent"/>
29、怎样使一个层垂直居中于浏览器中:
<!DOCTYPE htmlPUBLIC "-//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>怎样使一个层垂直居中于浏览器中</title>
<style type="text/css">
<!--
div {
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
}
-->
</style>
</head>
</script>
<body>
<div>www.hemin.cn</div>
</body>
</html>
ps:这里我们使用百分比绝对定位，与外补丁负值的方法，负值的大小为其自身宽度高度除以二
from http://www.hemin.cn/blog/?p=184
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>容器不扩展问题</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;
ps:很多人都是在里面加个清除浮动空标签来解决，其实这个是错误办法。太增加代码量了
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下如何使连续长字段自动换行</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.hemin.cnwww.hemin.cnwww.hemin.cnwww.hemin.cn
</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、最狠的手段 – !important;
如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE则会忽略.如下
1. .tabd1{
2. background:url(/res/images/up/tab1.gif)no-repeat 0px 0px !important; /*Style for FF*/
3. background:url(/res/images/up/tab1.gif)no-repeat 1px 0px; /* Style for IE */}
值得注意的是，一定要将xxxx !important
这句放置在另一句之上。
6、IE6躲猫猫bug
<!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>躲猫猫bug</title>
<style type="text/css">
#holder{
background-color:pink; /***引起bug的重要因素，一种解释就是：那些消失的文字躲到了背景之后***/
/*** width:100%; 对最大的容器设置宽度，相对宽度和绝对宽度都可以，即可修正bug ***/
}
#holder a:hover{
background-color:deeppink; /***为了增强视觉效果而已，可以去掉。***/
}
#floater{
float:right; /***引起bug的重要因素***/
width:135px;
height:310px; /***<
4000
/span>引起bug的重要因素，高度一定要大于那些文字的高度***/
border:1px solid green;
}
.clear{
clear:both; /***引起bug的重要因素***/
}
#footer{ /***为了增强视觉效果而已，可以去掉。***/
height:50px;
border-top:1px solid blue;
}
</style>
</head>
<body>
<div id="holder">
<div id="floater">
躲猫猫bug<br/ />
<a href="#" title=""><img alt="躲猫猫bug"src="http://www.baidu.com/img/logo-yy.gif" /></a>
</div><!--end: floater -->
<div id="ghostHolder">
这个示例是为了演示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
<ul style="list-style-type: disc">
<li><a title="躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu"
href="#">躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu</a>
</li>
<li><a title="躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu"
href="#">躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu</a>
</li>
<li><a title="躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu"
href="#">躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu</a>
</li>
<li><a title="躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu"
href="#">躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu</a>
</li>
<li><a title="躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu"
href="#">躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu</a>
</li>
<li><a title="躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu"
href="#">躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu</a>
</li>
</ul>
</div><!--end: ghostHolder -->
<div class="clear"></div>
<div id="footer">
</div>
</div><!--end: holder -->
</body>
</html>
下面方法的任意一种即可消灭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>
<!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下line-height bug</title>
<style>
.c{background-color:#f00;height:0px;/*给定任何小于20px的高度 */}</style>
</head>
<body>
<div class="c"></div>
</body>
</html>
如果不让它默认为19PX。而是0PX的话
解决方法有3种：
1.css里面加上overflow:hidden;
2.div里面加上注释,
<divclass="c"><!–
–></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.hemin.cn’);"style="cursor:pointer">设为首页</span>
13、加入收藏代码:
1. <script>
2. function addfavorite()
3. {
4. if (document.all)
5. {
6. window.external.addFavorite(’http://bbs.blueidea.com’,'经典论坛’);
7. }
8. else if (window.sidebar)
9. {
10. window.sidebar.addPanel(’经典论坛’,‘http://bbs.blueidea.com’, "");
11. }
12. }
13. </script>
14. <a href="#"onclick="addfavorite()">把经典论坛加入收藏</a>
14、通过定义em实现小三角效果:
1. * {
2. font-size:14px;/*
必须通配字体大小 */
3. }
4. em {
5. display:block;
6. font:0/0 "宋体";/*
经本人摸索,只有在宋体下才最为标准 */
7. border:7px solid;/* border值越大,三角形越大 */
8. border-color:#fff #fff #fff#444;/*
通过改变颜色值,可产生不同效果,自己实验 */
9. margin-top:5px
10. }
15、IE6下当层高低于10px时,会出现高度在定义值上加10px的效果,最简单的方法就是在该层样式中加入:
font-size:0;
16、空div在IE(FF中没有)是有默认高度的,可以用定义:
div { width:100%;background:#9c0; ling-height:0}
17、描边文字效果:
1. <divstyle="position:relative;
width:200px; height:25px;line-height:25px; text-align:center; font-size:14px; color:#fff;background:#9c0;">
2. 这是描边文字<span style="position:absolute;left:-1px;
top:-1px; color:#444;width:200px; height:25px; display:block">这是描边文字</span>
3. </div>
18、input鼠标经过时改变颜色:
input {star :expression(onmouseover=function(){this.style.backgroundColor=”#FF0000″},onmouseout=function(){this.style.backgroundColor=”#FFFFFF”})}
19、图片在容器里垂直居中显示:
img {margin-top:expression(( 150 – this.height ) / 2);} //150是容器高
20、超链接访问过后hover样式就不出现的问题:
<!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>超链接访问过后hover样式就不出现的问题</title>
<style type="text/css">
<!--
a:link {
color:red
}
a:hover {
color:blue
}
a:visited {
color:green
}
a:active {
color:orange
}
-->
</style>
</head>
<body>
<a href="#">
www.hemin.cn--www.hemin.cn
</a>
</body>
</html>
ps:被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题，解决方法是改变CSS属性的排列顺序:
L-V-H-A
21、FF下如何使连续长字段自动换行:
<!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下如何使连续长字段自动换行</title>
<style type="text/css">
<!--
div {
width:300px;
word-wrap:break-word;
border:1px solid red;
}
-->
</style>
</head>
<script type="text/javascript">
/* <![CDATA[ */
function toBreakWord(intLen){
var obj=document.getElementById("ff");
var strContent=obj.innerHTML;
var strTemp="";
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下为什么图片下方有空隙产生:
<!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下为什么图片下方有空隙产生</title> <style type="text/css"><!-- div { border:1px solid red; background:orange; } img { width:276px;height:110px; } --> </style> </head> </script><body> <div>
<imgsrc="http://www.google.com/intl/en_ALL/images/logo.gif"alt="google" /> </div> </body> </html>
ps:解决这个BUG的方法也有很多，可以是改变html的排版，或者设置img
为display:block；
或者设置vertical-align属性为vertical-align:top | bottom|middle |text-bottom
都可以解决.
23、 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下这两个层中间怎么有间隙</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>
ps:这个IE的3PX BUG也是经常出现的，解决的办法是给.right也同样浮动
float:left 或者相对IE6定义.left margin-right:-3px;
24、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无法准确定位的问题</title>
<style type="text/css">
<!--
li {
list-style:url("http://bbs.blueidea.com/attachments/2006/11/10/arrowb_kJrcZheJmiIF.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>
ps:这个list-style-image的定位问题也是经常有人问的，解决的办法一般是用li的背景模拟，这里采用相对定位的方法也可以解决
25、web标准中定义id与class有什么区别吗:
<!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>web标准中定义id与class有什么区别吗</title>
<style type="text/css">
<!--
#aa {
color:red
}
.aa {
color:blue
}
-->
</style>
</head>
</script>
<body>
<div id="aa" class="aa">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</body>
</html>
web标准中是不容许重复ID的,比如
div id=”aa” 不容许重复2次,而class
定义的是类,理论上可以无限重复,
这样需要多次引用的定义便可以使用他.
二.
属性的优先级问题
ID 的优先级要高于class,看上面的例子
三.
方便JS等客户端脚本，如果在页面中要对某个对象进行脚本操作，那么可以给他定义一个ID，否则只能利用遍历页面元素加上指定特定属性来找到它，这是相对浪费时间资源，远远不如一个ID来得简单.
26、如何对齐文本与文本输入筐:
<!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>如何对齐文本与文本输入筐</title>
<style type="text/css">
<!--
input {
width:200px;
height:30px;
border:1px solid red;
}
-->
</style>
</head>
</script>
<body>
<input type="text" />aaaaaaaaaaaaaaaaaa
</body>
</html>
ps:遇到此种问题，设置文本框的vertical-align:middle
就可以了
27、为什么web标准中IE无法设置滚动条颜色了:
<!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>为什么web标准中IE无法设置滚动条颜色了</title>
<style type="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
28、怎么样才能让层显示在FLASH之上呢:
<!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>怎么样才能让层显示在FLASH之上呢</title>
<style type="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.hemin.cn
</div>
<object type="application/x-shockwave-flash"data="http://gg.blueidea.com/2005/www/m533-104.swf">
<param name="movie"value="http://gg.blueidea.com/2005/www/m533-104.swf" />
</object>
</body>
</html>
ps:解决的办法是给FLASH设置透明
<paramname="wmode"value="transparent"/>
29、怎样使一个层垂直居中于浏览器中:
<!DOCTYPE htmlPUBLIC "-//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>怎样使一个层垂直居中于浏览器中</title>
<style type="text/css">
<!--
div {
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
}
-->
</style>
</head>
</script>
<body>
<div>www.hemin.cn</div>
</body>
</html>
ps:这里我们使用百分比绝对定位，与外补丁负值的方法，负值的大小为其自身宽度高度除以二
from http://www.hemin.cn/blog/?p=184
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- css鼠标手型cursor
- 图片轮播，纯js+css
- CSS Selectors
- [R语言绘图]绘图样式设置（符号、线条、颜色、文本属性）
- CSS Properties and CSS Rules
- Using CSS in HTML
- css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题
- Qt 自定义 滚动条 样式
- 关于Css选择器优先级
- CSS3选择器
- iOS之设置导航控制器样式以及AttributeText, NSMutableAttributedString
- AUTOCAD ActiveX 设置默认点样式
- label、span标签小解
- CSS 清除浮动的几种方式
- CSS里的单位
- CSS定位阴影
- CSS多种方法实现分隔线
- pre 随变化的样式
- CSS3 选择器——伪类选择器
- 16款纯CSS3实现的loading加载动画