KingCMS

首页下载博客模板服务帮助

K9 通用版博客版主题版地方门户版企业版 | 企业(ASP) 分类使用分享疑问模板建议帮助错误其他

+新建主题 [Ajax]

填写帐号密码即可完成注册

KingCMS官方网站 >> 论坛首页 >> 分享 >> 话题

大家也许以后会用到 CSS十大经典问题

1Next >

99163	发表于：10-09-09 22:31 [取消收藏] [添加收藏] 楼主 [回复] #Top#
人气：865 积分：1901 金币：6081	1.超链接访问过后hover样式就不出现的问题解决方案：被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题，解决方法是改变CSS属性的排列顺序: L-V-H-A；代码: <!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>eb163</title> <style type="text/css"> a:link { color:red; } a:hover { color:blue; } a:visited { color:green; } a:active { colorrange; } </style> </head> <body> <a href="#" mce_href="#"> web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全 </a> </body> </html> { 有用 } 2. IE6的双倍边距BUG 代码: <!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>eb163</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下为什么父容器的高度不能自适应代码: <!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>eb163</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下为什么图片下方有空隙产生代码: <!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>eb163</title> <style type="text/css"> div { border:1px solid red; backgroundrange; } img { width:276px; height:110px; } </style> </head> <body> <div> <img src="/u/info_img/2008-10/03/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.如何垂直居中文本代码: <!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>eb163</title> <style type="text/css"> div { height:30px; line-height:30px; border:1px solid red } </style> </head> <body> <div>web标准常见问题大全</div> </body> </html> 解决方案:给容器设置一个与其高度相同的行高就可以了 { 有用 } 7.如何对齐文本与文本输入框代码: <!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>eb163</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下文本无法撑开容器的高度代码: <!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>eb163</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左右高度的容器代码: <!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>eb163</title> <style type="text/css"> div { background:red; } </style> </head> <body> <div> </div> </body> </html> 解决方案:IE6下这个问题是因为默认的行高造成的，解决的方法也有很多，例如：overflow:hidden \| zoom:0.08 \| line-height:1px { overflow:hidden,这个方法对所有的浏览器都没用； zoom:0.08，这个方法对FF没用； line-height:1px，这个方法对所有浏览器都有用！ } 10.怎么样才能让层显示在FLASH之上呢代码: <!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>eb163</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.eb163.com/2005/www/m533-104.swf“> <param name="movie" value="/u/info_img/2008-10/03/m533-104.swf" /> </object> </body> </html> 解决方案:解决的办法是给FLASH设置透明<param name="wmode" value="transparent" />或者<param name="wmode" value="opaque" /> Ta最近还发表过 [其他] 请问还有多少老用户在 (18-02-24) [模板] 这次真的搞不定，三级dropdown弹出菜单。 (18-02-10) [使用] 修改碎片的文本框为编辑器　源文件下载　无错 (18-01-18) [使用] 如何尽快解决购物车white.gif图标问题 (17-12-10) [使用] 还有人在用KINGCMS PHP吗感觉好淡了。。 (17-10-15) 随机阅读 [分享] 云计算应用模式的八大亮点 (15-05-30) [模板] kingcms 5.1 博客模版 (15-01-30) [分享] 如何正确对待外链？ (13-05-10) [建议] 建议官方出套如163k的网站模板 (12-12-26) [疑问] 新闻上一篇下一篇的链接 (11-06-20)

99163

发表于：10-09-09 22:31 [取消收藏] [添加收藏] 楼主 [回复] #Top#

人气：865 积分：1901 金币：6081

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

解决方案：被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题，解决方法是改变CSS属性的排列顺序: L-V-H-A；

代码:

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

a:link {

color:red;

}

a:hover {

color:blue;

}

a:visited {

color:green;

}

a:active {

colorrange;

}

</style>

</head>

<body>

web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全

</a>

</body>

</html>

{ 有用 }

2. IE6的双倍边距BUG

代码:

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

body {

margin:0

}

div {

float:left;

margin-left:10px;

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标准常见问题大全

</a>

</div>

</body>

</html>

解决方案:浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline

{ 有用 }

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

代码:

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

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下为什么图片下方有空隙产生

代码:

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

div {

border:1px solid red;

backgroundrange;

}

img {

width:276px;

height:110px;

}

</style>

</head>

<body>

<div>

</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.如何垂直居中文本

代码:

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

div {

height:30px;

line-height:30px;

border:1px solid red

}

</style>

</head>

<body>

<div>web标准常见问题大全</div>

</body>

</html>

解决方案:给容器设置一个与其高度相同的行高就可以了

{ 有用 }

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

代码:

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

input {

width:200px;

height:30px;

border:1px solid red;

}

</style>

</head>

<body>

<input type="text" />aaaaaaaaaaaaaaaaaa

</body>

</html>

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

{ 有用 }

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

代码:

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

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左右高度的容器

代码:

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

div {

background:red;

}

</style>

</head>

<body>

</body>

</html>

解决方案:IE6下这个问题是因为默认的行高造成的，解决的方法也有很多，例如：overflow:hidden | zoom:0.08 | line-height:1px

{

overflow:hidden,这个方法对所有的浏览器都没用；

zoom:0.08，这个方法对FF没用；

line-height:1px，这个方法对所有浏览器都有用！

}

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

代码:

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

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>

</body>

</html>

解决方案:解决的办法是给FLASH设置透明<param name="wmode" value="transparent" />或者<param name="wmode" value="opaque" />

Ta最近还发表过 [其他] 请问还有多少老用户在 (18-02-24) [模板] 这次真的搞不定，三级dropdown弹出菜单。 (18-02-10) [使用] 修改碎片的文本框为编辑器　源文件下载　无错 (18-01-18) [使用] 如何尽快解决购物车white.gif图标问题 (17-12-10) [使用] 还有人在用KINGCMS PHP吗感觉好淡了。。 (17-10-15)

随机阅读 [分享] 云计算应用模式的八大亮点 (15-05-30) [模板] kingcms 5.1 博客模版 (15-01-30) [分享] 如何正确对待外链？ (13-05-10) [建议] 建议官方出套如163k的网站模板 (12-12-26) [疑问] 新闻上一篇下一篇的链接 (11-06-20)

SinCS	发表于：10-09-10 10:49 沙发 [回复] #Top#
人气：1148 积分：28 金币：73433	不知道的以为是垃圾站了…… 帖子也太长了……

迅猛龙	发表于：10-09-10 10:49 板凳 [回复] #Top#
人气：104 积分：1522 金币：3203	Reply: 沙发老大来回答我的问题啊

jiaoda015	发表于：11-04-29 17:54 4楼 [回复] #Top#
人气：15 积分：1 金币：640	帖子太长不过内容不错

saccerp	发表于：11-05-04 17:08 5楼 [回复] #Top#
人气：15 积分：207 金币：401	我也看完了，那个双倍间距和3像素问题曾今让我伤透脑筋~ 据说现在IE6还有30%的份额，真晕~~~

1Next >

发表回复

帐号	匿名发布审核后可见 [加载完整在线编辑器]
内容
验证码	计算题太难?换个简单点的.

我已认真阅读服务条款，并遵守具体协议内容

KingCMS 内容管理系统

关于我们联系我们广告报价付款方式站点导航

广州唯众网络科技有限公司粤ICP备08008106号