CSS十大经典问题

最新推荐文章于 2022-12-03 00:18:41 发布

jingyingtuzi

最新推荐文章于 2022-12-03 00:18:41 发布

阅读量627

点赞数

分类专栏： CSS 文章标签： css web xhtml html xml float

CSS 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

转自： http://info.codepub.com/2008/10/info-22750.html

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

代码:

解决方案：这个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. 如何对齐文本与文本输入框

代码:

解决方案：遇到此种问题，设置文本框的 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 左右高度的容器

代码:

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

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

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