IE8下HTML实现控件悬浮在顶部

最新推荐文章于 2022-08-11 13:07:27 发布

jaijiaww

最新推荐文章于 2022-08-11 13:07:27 发布

阅读量470

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/qq_36033484/article/details/106340130

版权

HTML有个属性position,将该属性设置为fixed,元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动，也就是实现了控件的悬浮，top=0悬浮在顶部,bottom=0悬浮在底部。

由于IE8的局限性，获取HTML元素需要注意加载顺序的问题，一开始我通过<style>标签声明css样式，发现并不起作用，如下：

<head>
<style type="text/css">
#_toobar{
    position: fixed;
    height: 28px;
    width: 100%;
    z-index: 999;
    top: 0;
}
</style>
</head>
<body>
	<div id="_toobar"></div>
	<div id="_form" style="width:1000px;margin-top:30px"></div>
</body>

原因是在执行<style>标签内的css代码时toobar还未被加载，所以设置的样式根本就不起作用。了解了原因，问题也就迎刃而解，直接将样式设置在元素内，如下：

<div id="_toobar" style="position:fixed;top:0;height:28px;width:100%;z-index:999"></div>

到这里还没有结束，因为Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持，需要在顶部添加上<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

jaijiaww

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IE8下HTML实现控件悬浮在顶部

HTML有个属性position,将该属性设置为fixed,元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动，也就是实现了控件的悬浮，top=0悬浮在顶部,bottom=0悬浮在底部。由于IE8的局限性，获取HTML元素需要注意加载顺序的问题，一开始我通过<style>标签声明css样式，发现并不起作用，如下：<head><style type="text/css">#_toobar{ position: fixed; he
复制链接

扫一扫