整理解决一些 DIV+CSS 应用中的问题

最新推荐文章于 2024-11-02 12:42:04 发布

dianxumiu6271

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量89

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/cobweb/archive/2009/08/02/1537158.html

版权

制作页面的过程中总是碰到div + css 浏览器兼容性问题,每次碰到问题都上网查资料,比较影响工作效率,今天下决心把这些知识都整理整理,以便提高工作效率.虽然网上有朋友整理过,但是还是希望自己能有深入的理解。
首先整理下各个浏览器之间的区别:
1.margin 加倍问题：　　
现象:对象设置float,并且设置了margin ,IE6下,边距为设置值的2倍,边距是对于父对象的边距,同级对象之间无此问题;
原因:IE6解析问题;
解决:设置对象display:inline;
例子:

margin 加倍问题

<html xmlns="http://www.w3.org/1999/xhtml">
2

<head>
3

<title>无标题文档</title>
5

<!--
7

#box {

}{
8

float: left;
9

height: 200px;
10

width: 500px;
11

background-color: #090;
12

}
13

#content {

}{
14

float: left;
15

height: 100px;
16

width: 100px;
17

margin-left: 100px;
18

background-color: #F00;
19

}
20

-->
21

</style>
22

</head>
23

<body>
25

<div id="box">
26

<div id="content">此处显示 id "b" 的内容</div>
27

</div>
28

</body>
30

</html>
31

2.div的垂直居中问题:
现象:div内容垂直居中设置无效
解决: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行,事实上实现的原理就是一个div只有一行,每行高就是div的高,然后居中显示就ok了.
例子:

内容垂直居中显示
1

<html xmlns="http://www.w3.org/1999/xhtml">
2

<head>
3

<title>无标题文档</title>
5

<!--
7

#text {

}{
8

height: 200px;
9

width: 200px;
10

background-color: #F00;
11

vertical-align: middle;
12

line-height: 200px;
13

}
14

-->
15

</style>
16

</head>
17

<body>
18

<div id="text">缺点是要控制内容不要换行</div>
19

</body>
20

</html>
21

3 IE 宽度和高度的问题
现象:IE不认识min-height 和 min-width 两个属性,但是IE是自动随内容扩展的,而FF是会将溢出内容隐藏;如果给对象设置min-height 和 min-width 等于没有设置高度和宽度.没有设置float:left 的情况下,设不设min-width没区别,但是min-height有作用,设置float:left以后min-width 有差别;
例子:

IE最小高度宽度问题
1

<html xmlns="http://www.w3.org/1999/xhtml">
2

<head>
3

<title>无标题文档</title>
5

<!--
7

#box{

}{
8

min-width:180px;
9

min-height:40px;
10

float:left;
11

background-color: #F00;
12

}
13

#box1{

}{
14

clear:left;
15

min-width:180px;
16

min-height:40px;
17

background:#0F3;
18

}
19

#box2{

}{
20

width:180px;
21

height:40px;
22

float:left;
23

background:#30F;
24

}
25

html>body #box2{

}{
26

width: auto;
27

height:auto;
28

min-width: 180px;
29

min-height: 40px;
30

}
31

-->
34

</style>
35

</head>
36

<body>
37

<div id="box">无hack情况左浮动</div>
38

<div id="box1">未浮动情况</div>
39

<div id="box2">hack下情况</div>
40

</body>
41

</html>

说明: html>body: >是子选择符,用于匹配那些其他元素的直接后辈,属于CSS2。IE6不识别此选择符,故以设置FF达到相同效果;
4 页面的最小宽度

现象:因为浏览器大小不同,经常要给网页设置最小宽度,以适应不同的浏览器,给body设置最小宽度min-width在FF里是起作用的,但是IE里没有效果;
解决:在IE下最外层加一个div,用JavaScript解决;
例子:

页面最小宽度
1

<html xmlns="http://www.w3.org/1999/xhtml">
2

<head>
3

<title>无标题文档</title>
5

<!--
8

#container{

}{
9

min-width:800px;
10

height:200px;
11

background:#0F0;
12

width:expression(document.body.clientWidth <= 800? "800px": "auto" );
13

min-width:800px;
15

}
17

#container #left {

}{
18

float: left;
19

width: 400px;
20

height:100px;
21

background:#F0F;
22

}
23

#right {

}{
24

float: left;
25

height: 100px;
26

width: 400px;
27

background:#306
28

}
29

-->
30

</style>
31

</head>
32

<body>
33

<div id="container">
34

<div id="left">left</div>
35

<div id="right">right</div>
36

</div>
37

</body>
38

</html>
39

说明:在页面内容为空的情况下(当然这种情况基本不可能出现,在实验过程中发现的),min-width是不起作用的.
width:expression(document.body.clientWidth <= 800? "800px": "auto" ); 不不加等号居然导致浏览器死掉崩溃,不明白原因;

转载于:https://www.cnblogs.com/cobweb/archive/2009/08/02/1537158.html