关于css中的position在各大浏览器（IE,FireFox,Opera）中表现问题

最新推荐文章于 2024-01-18 15:50:18 发布

weixin_33897722

最新推荐文章于 2024-01-18 15:50:18 发布

阅读量526

点赞数

文章标签： xhtml

本文探讨了CSS中position属性在IE、Firefox和Opera等浏览器中的表现差异，特别是在relative定位下元素的行为变化，以及不同浏览器解析上的不一致性。文章提出了在实现固定表头等效果时遇到的问题，并寻求解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于css中的position在各大浏览器（IE,FireFox,Opera）中表现问题：

第一种情况：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2

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

<head>
4

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

#div-1
8

{

}{
9

position:relative;
10

top:0px;
11

left:150px;
12

background:#CC9933;
13

border:1px solid #66FF66;
14

width:400px;
15

height:300px;
16

}
17

#div-1a
18

{

}{
19

position:absolute;
20

top:0;
21

left:0;
22

width:100px;
23

height:600px;
24

background:#9999FF;
25

}
26

.autoCenter
27

{

}{
28

margin:0 auto;
29

border:1px solid #6595d6;
30

}
31

.clearBoth
32

{

}{
33

height:1px;
34

clear:both;
35

}
36

.divFather
37

{

}{
38

height:400px; overflow:scroll;border:2px solid #ccc;
39

width:600px;
40

}
41

.divA
43

{

}{
44

position:relative;
45

}
47

</style>
48

</head>
49

<body scroll="no" >
51

<br />
52

<br />
53

<div class="divFather">
54

<div id="div-1">
55

<p>d </p>
56

<p>dfd</p>
57

</div>
58

<div id="div-1a"> df</div>
59

<div class="clearBoth"></div>
60

<div class="autoCenter">
61

<p>d</p>
62

<p> </p>
63

</div>
64

<div class="autoCenter">
65

<p>d</p>
66

<p> </p>
67

</div>
68

</div>
69

<!--
70

<div id="div-1" class="divFather">
71

<div id="div-1a">
72

this is div-1a element.
73

</div>
74

this is div-1 element.
75

</div>
76

-->
77

</body>
78

</html>
79

(1)、IE中解释良好，ID为div-1的元素如期在其容器类名为divFather中，相对固定在某一个位置，通过这个功能做固定表头效果非常的方便。
(2)、而ID为div-1的元素在Opera和和FireFox中它会随着滚动条的而滚动，也就是说起不到relative 的作用。

第二种情况：

#div-1
    {
        position:relative;
        top:0px;
        left:150px;
        background:#CC9933;
        border:1px solid #66FF66;
        width:400px;
        height:500px;
    }

我们将修改#div-1中的heigth属性，让它的高度高于其容器.divFather时，发现这时IE的解析与我想象中的不同
(1)、在IE中ID为div-1的元素突破了其容器而显示在外部，也就是说position:relative;中起不到相对于其容器的位置，而是相对于浏览器也就是窗口，在IE中设置position为relative时它与任何的元素是没有关联的，它的位置在哪也也不会影响到任何元素的布局。