各種CSS bug与技巧--河南BOB集团有限公司电子科技有限公司

當前位置：網站首頁》網站常識》详细信息

各種CSS bug与技巧

1、容器不扩展问题

這個是經常在我切圖的時候遇到的問題，如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>容器不扩展问题</title>

#divGroup{ border:2px solid #333;}

#a,#b{ border:2px solid #333; float:left; margin:5px;}

</style>

</head>

<body>

</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">

<head>

<title>FF下如何使连续长字段自动换行</title>

body {

margin:0

}

div {

float:left;

margin-left:10px;

width:200px;

height:200px;

border:1px solid red

}

</style>

</head>

</script>

<body>

<div>

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">

<head>

<title>躲猫猫bug</title>

#holder{

background-color:pink; /***引起bug的重要因素，一种解释就是：那些消失的文字躲到了背景之后***/

/*** width:100%; 对最大的容器设置宽度，相对宽度和绝对宽度都可以，即可修正bug ***/

}

#holder a:hover{

background-color:deeppink; /***为了增强视觉效果而已，可以去掉。***/

}

#floater{

float:right; /***引起bug的重要因素***/

width:135px;

height:310px; /***引起bug的重要因素，高度一定要大于那些文字的高度***/

border:1px solid green;

}

.clear{

clear:both; /***引起bug的重要因素***/

}

#footer{ /***为了增强视觉效果而已，可以去掉。***/

height:50px;

border-top:1px solid blue;

}

</style>

</head>

<body>

躲貓貓bug<br/ />

</div>

這個示例是爲了演示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

<li><a title="躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu" href="#">躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu</a> </li>

</ul>

</div>

</div>

</div>

</body>

</html>

下面方法的任意一種即可消滅bug：

1.明确的指定最外面div容器（#holder）的宽度（相对宽度和绝对宽带都可以）。

2.去掉最外面div容器（#holder）的背景颜色（或者背景图片）

3.缩小浮动div容器（#floater）的高度到一定程度

4.不浮动div容器（#floater）

5.不使用

技術

7、ie6下空标签高度问题

一個空div如果高度设置为0到19px，IE6下高度默认始终19PX。

例如：

.c{background-color:#f00;height:0px;/*给定任何小于20px的高度 */}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>ie6下line-height bug</title>

<style>

.c{background-color:#f00;height:0px;/*给定任何小于20px的高度 */}</style>

</head>

<body>

</body>

</html>

如果不讓它默認爲19PX。而是0PX的话

解決方法有3种：

1.css里面加上overflow:hidden;

2.div里面加上注释,

3.css里面加上line-height:0;然后div里面加上#nbsp;,

<div class="c"> </div>(#换成&)

注意：ie6下给div设置的高度小于ie6的line-height值时,ie6会将这个div的高度定为line-height的值.

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

<a href="#" 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”):

<img src="img.gif" align="absmiddle">中英文并排:<a href="/">中文 gollum</a>

12、设为首页代码:

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. <div style="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">

<head>

<title>超链接访问过后hover样式就不出现的问题</title>

<!--

a:link {

color:red

}

a:hover {

color:blue

}

a:visited {

color:green

}

a:active {

color:orange

}

-->

</style>

</head>

<body>

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">

<head>

<title>FF下如何使连续长字段自动换行</title>

<!--

div {

width:300px;

word-wrap:break-word;

border:1px solid red;

}

-->

</style>

</head>

/* <![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>

<div id="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">  </style> </head> </script> <body> <div> <img src="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">

<head>

<title>IE6下这两个层中间怎么有间隙</title>

<!--

.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">

<head>

<title>ist-style-image无法准确定位的问题</title>

<!--

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>

</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">

<head>

<title>web标准中定义id与class有什么区别吗</title>

<!--

#aa {

color:red

}

.aa {

color:blue

}

-->

</style>

</head>

</script>

<body>

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">

<head>

<title>如何对齐文本与文本输入筐</title>

<!--

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">

<head>

<title>为什么web标准中IE无法设置滚动条颜色了</title>

<!--

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>

</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">

<head>

<title>怎么样才能让层显示在FLASH之上呢</title>

<!--

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>

</body>

</html>

ps:解决的办法是给FLASH设置透明

29、怎样使一个层垂直居中于浏览器中:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>怎样使一个层垂直居中于浏览器中</title>

<!--

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:这里我们使用百分比绝对定位，与外补丁负值的方法，负值的大小为其自身宽度高度除以二

上一篇：網站生成靜態網頁的利與弊

下一篇：註冊域名的選擇技巧