首页 / 知识

关于html：修复IE6中的页面布局

2023-04-13 08:59:00

Fixed page layout in IE6

页眉，页脚和侧栏具有固定位置。中间是带有两个滚动条的内容区域。浏览器上没有外部滚动条。我有一个可以在IE7和FF中使用的布局。我需要添加IE6支持。我该如何工作？

这是我当前CSS的近似值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

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

<head>
Layout
<style>
* {
margin: 0px;
padding: 0px;
border: 0px;
}

.sample-border {
border: 1px solid black;
}

#header {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
height: 60px;
}

#left-sidebar {
position: absolute;
top: 65px;
left: 0px;
width: 220px;
bottom: 110px;
}

#right-sidebar {
position: absolute;
top: 65px;
right: 0px;
width: 200px;
bottom: 110px;
}

#footer {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
height: 105px;
}

@media screen {
#content {
position: absolute;
top: 65px;
left: 225px;
bottom: 110px;
right: 205px;
overflow: auto;
}
body #left-sidebar,
body #right-sidebar,
body #header,
body #footer,
body #content {
position: fixed;
}
}
</style>
</head>

<body>

<img src="/broken.webp" style="display: block; width: 3000px; height: 3000px;" />

</body>

</html>

对于您的项目而言，可能有些矫kill过正，但是Dean Edwards的IE7 javascript为IE6添加了对固定位置的支持。

将以下代码添加到

1
2
3
4
5
6
7
8
9
10
11

将ie6fixed CSS类添加到您想成为的position: fixed;

请查看下面的纯CSS hack ...有些要求将其强制为怪癖模式(我认为这是最可靠的)，但所有方法都运行良好：

http://ryanfait.com/resources/fixed-positioning-in-internet-explorer/
http://tagsoup.com/cookbook/css/fixed/

我已经使用了此方法，效果很好，希望对您有所帮助！

这些答案很有帮助，它们的确使我向IE6添加了有限形式的固定位置，但是，如果我同时为侧边栏指定top和bottom css属性，则这些方法都无法修复破坏IE6布局的错误。我需要的行为)。

由于无法指定顶部和底部，因此我使用了顶部和高度。事实证明height属性非常必要。我使用javascript重新计算了页面加载时的高度以及任何大小。

下面是我添加到测试用例中的代码，以使其正常工作。使用jQuery可能会更清洁。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

试试IE7.js。应该解决您的问题，而无需进行任何修改。

链接：IE7.js

页面布局滚动条区域布局