打印

( 讨论 ) CSS十大经典问题

前两天刚在网上看到的,有一些自己还不理解,有一些感觉好像解决方法也不对,发上来,大家讨论讨论


1.超链接访问过后hover样式就不出现的问题

Code:
复制内容到剪贴板
代码:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</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="#" mce_href="#">
web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全
</a>
</body>
</html>
解决方案:被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A;

{  有用  }

2. IE6的双倍边距BUG

Code:
复制内容到剪贴板
代码:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
body {
margin:0
}
div {
float:left;
margin-left:10px;
width:200px;
height:200px;
border:1px solid red
}
</style>
</head>
<body>
<div>
<a href="#" mce_href="#">
web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全
</a>
</div>
</body>
</html>
解决方案:浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline

{    有用   }

3.ff下为什么父容器的高度不能自适应

Code:
复制内容到剪贴板
代码:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
div {
width:200px;
border:1px solid red
}
p {
float:left;
width:100px;
}
</style>
</head>
<body>
<div><p>web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全</p></div>
</body>
</html>
解决方案:为什么这个P撑不开DIV呢?解决的办法是在div 与 p 之间插入<div style=“clear:both"></div>清除掉这个p的浮动.

{   结果:经过实验,好像没用
    解决方法:不用插入<div style=“clear:both"></div>,只要去掉P的浮    动属性,把float:left;去掉即可   }

4. IE下为什么图片下方有空隙产生

Code:
复制内容到剪贴板
代码:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
div {
border:1px solid red;
background:orange;
}
img {
width:276px;
height:110px;
}
</style>
</head>
<body>
<div>
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="google" />
</div>
</body>
</html>
解决方案:这个IE的3PX BUG也是经常出现的,解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left margin-right:-3px;


{   不明白(遇到过此类问题,但忘记怎么解决的啦!)  }


5.web标准中定义id与class有什么区别吗

解决方案:一.

web标准中是不容许重复ID的,比如 div id="aa" 一个页面中不容许重复2次,而class 定义的是类,理论上可以无限重复的, 这样需要多次引用的定义便可以使用他.class还可以同时引用多个类,不同的类之间用空格隔开.

二.

属性的优先级问题,ID 的优先级要高于class,看上面的例子

三.

方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单.


6.如何垂直居中文本
Code:
复制内容到剪贴板
代码:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
div {
height:30px;
line-height:30px;
border:1px solid red
}
</style>
</head>
<body>
<div>web标准常见问题大全</div>
</body>
</html>
解决方案:给容器设置一个与其高度相同的行高就可以了

{   有用   }


7.如何对齐文本与文本输入筐

Code:
复制内容到剪贴板
代码:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
input {
width:200px;
height:30px;
border:1px solid red;
}
</style>
</head>
<body>
<input type="text" />aaaaaaaaaaaaaaaaaa
</body>
</html>
解决方案:遇到此种问题,设置文本框的 vertical-align:middle 就可以了

{   有用   }

8.为什么FF下文本无法撑开容器的高度

Code:
复制内容到剪贴板
代码:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
div {
width:200px;
height:200px;
border:1px solid red
}
</style>
</head>
<body>
<div>web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见</div>
</body>
</html>
解决方案:标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢?办法就是去掉height设置min-height:200px;  这里为了照顾不认识min-height的IE6 可以这样定义:

{
height:auto!important;
height:200px;
min-height:200px;
}


{   有用,但是觉得挺矛盾的,至少我现在还这么想,既然让他自适应高度了,    又何必定高呢,还没想明白,努力想中,如果以后遇到这样的case,也许会    明白吧     }


9.为什么无法定义1px左右高度的容器

Code:
复制内容到剪贴板
代码:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
div {
background:red;
}
</style>
</head>
<body>
<div>&nbsp;</div>
</body>
</html>
解决方案:IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px


{  
   overflow:hidden,这个方法对所有的浏览器都没用;
   zoom:0.08,这个方法对FF没用;
   line-height:1px,这个方法对所有浏览器都有用!
}

10..怎么样才能让层显示在FLASH之上呢

Code:
复制内容到剪贴板
代码:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</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>
<body>
<div>
web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全
</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>
解决方案:解决的办法是给FLASH设置透明<param name="wmode" value="transparent" />或者<param name="wmode" value="opaque" />


{   不知道怎么加,对这个属性了解的太少,以后慢慢研究   }

[ 本帖最后由 caiying2007 于 2008-6-24 16:30 编辑 ]

谢谢楼主的无私奉献,有几点非常实用

谢谢楼主的无私奉献,有几点非常实用
貌似版主在置顶帖里面都发有啦!  确实我也发现了,在上面的有几个问题里面还是有没解决的问题.....
XHTML--CSS(Web标准)联盟 QQ群:6258367
ie里三个像素的空隙,可以定义字体解决,
加上font-size:0px; 间隙就没有了!
好像这种故障是默认保留的字符间隙造成的,具体也不清楚,只是以前用表格的时候,小于字体的图片部分,都习惯设定字体小雨图片尺寸!现在用来解决这种问题也可以,我试过了,可以!
樓主可以可以排一下版啊.看不清楚
http://www.qlili.com 个人站帮点啊

TOP

楼主发的这些都根本不算比较麻烦的问题

TOP

引用:
原帖由 MONIMONIPO 于 2008-6-16 19:03 发表
楼主发的这些都根本不算比较麻烦的问题
有的在firefox无效

TOP

看得太累了

TOP

对于你所提到的第三种问题:
只要对外层div加上 float:left;就可以了解决,
有很多人认为float这个属性没什么用处,可以要也可以不要,从而造成在ff下面变样.
其实float可以帮助没有定义高度从而想实现自适应(外层适应内层).

TOP

回复 hangxj 在 10# 的帖子

恩,说的好,就是这样的问题

TOP

回复 MONIMONIPO 在 6# 的帖子

恩,确实都是一些不很麻烦的东西,但是有时候就是因为很小的一个问题(兼容性),不过兼容性也算是一个大问题,这个问题太多了,我就是在搜的时候在网上找到的资料,然后自己一个一个试的,发现有一些不知道为什么没用,所以拿来大家一起讨论讨论,(*^__^*) 嘻嘻……

TOP

第一个问题
那外链接样式,我给个实际链接地址后,就会出现问题,即鼠标没有滑过,也没点击,字的样式变成了绿色,而不是红色!
不知道是原因!

TOP



 提示:您可以先修改部分代码再运行


 提示:您可以先修改部分代码再运行

TOP

回复 shuibozuoliu 在 13# 的帖子

恩,你说的对哦,俺再测试测试哈,找找资料

TOP

引用:
原帖由 shuibozuoliu 于 2008-6-24 17:59 发表
第一个问题
那外链接样式,我给个实际链接地址后,就会出现问题,即鼠标没有滑过,也没点击,字的样式变成了绿色,而不是红色!
不知道是原因!
原因是因为这个地址你以经点击过了,所以显示点击后的样式。。你换个网址或清缓存再看

TOP

其他没什么异议,都是些经常用的技巧。就第三个问题:3.ff下为什么父容器的高度不能自适应。

{   结果:经过实验,好像没用
    解决方法:不用插入<div style=“clear:both"></div>,只要去掉P的浮    动属性,把float:left;去掉即可   }

这个不能自适应是因为子元素浮动了,所以清理浮动就可以了。不是楼主说的去掉float属性,那样即使不清理浮动也能够自适应,最关键是ff不能自动关闭浮动元素。

TOP

EN,有些置顶没有,重新整理下?
WXYCooL.CN

TOP

回复 majer 在 16# 的帖子

这个我得记到我的笔记里,好好记着,谢了!!

TOP

xeuxiel  xiexie

TOP

第6个,如果分两行显示呢?????

大家在看的时候多做,多验证下

TOP

回复 rene1018 在 20# 的帖子

嘿嘿,这个的前提条件就是一行显示呢!

TOP

回复 mhxm 在 4# 的帖子

兄弟你有才,这你也想的到

TOP

对于楼主说的最后一个问题这么加

<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" />
<param name="wmode" value="transparent" />
</object>

TOP

回复 11xuping2008 在 23# 的帖子

多谢朋友指点,明白怎么回事了,谢了!!!

TOP