CSS十大经典问题及解决方案

网络整理 - 07-29

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

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

2、IE6的双倍边距BUG

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

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

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" ““>
<html xmlns="" xml:lang="zh" lang="zh">
<head profile="#">
<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下为什么图片下方有空隙产生

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" “/article/UploadPic/2011-5/20115319546332.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、如何垂直居中文本

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

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

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" ““>
<html xmlns="" xml:lang="zh" lang="zh">
<head profile="#">
<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" ““>
<html xmlns="" xml:lang="zh" lang="zh">
<head profile="#">
<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;
}

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

解决方案：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" “/article/UploadPic/2011-5/20115319547944.swf" />
</object>
</body>
</html>

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