滚动时,chrome会复制固定元素
yos*_*ssi 8 html css browser google-chrome
我正在使用chrome版本18.0.1025.162 m
我在其中有iframe的html文件.
我无法更改包含页面或其CSS(main.htm)
我只能更改iframe(show.htm)及其CSS.
问题是当我向下滚动然后向上滚动时,管理栏div会被复制多次.
我附加2个屏幕截图,第一个是滚动前的屏幕,我还添加了代码,以便可以重现错误.
我认为它可能是chrome中的一个bug,我不确定.
我想知道它是否是一个错误,更重要的是,如果只是通过更改iframe进行解决,并且它不包括从iframe中删除背景颜色.
(从iframe中删除背景颜色解决了问题,但我需要背景颜色)
所以这就是它的样子:在滚动之前:
滚动后(管理栏在屏幕上复制)
现在代码重现chrome中的错误
第一个文件 - main.htm(我无法更改此代码)
<!-- main.htm -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#adminbar
{
background-color: #464646;
height: 28px;
position: fixed;
width: 100%;
top: 0;
}
#body-content
{
float: left;
width: 100%;
}
</style>
</head>
<body >
<div id="body-content">
<iframe src="show.htm" width="100%" height="943"></iframe>
<div id="adminbar" class="" role="navigation">
</div>
</div>
</body>
</html>
和show.htm
<!-- show.htm -->
<!DOCTYPE html>
<head>
<style type="text/css">
body
{
background: #e0e0e0;
}
</style>
</head>
<body>
<br/>
<p style='margin-bottom:500px;'>bazinga</p>
<p style='margin-bottom:500px;'>bazinga</p>
<p style='margin-bottom:500px;'>bazinga</p>
</body>
</html>
我想我找到了一个解决方法.我创建了一个文件background.png,它有一个像素,我想要的颜色(#e0e0e0).
我然后替换这个:
body
{
background: #e0e0e0;
}
有了这个:
body
{
background: #e0e0e0 url(background.png) repeat-x;
background-attachment: fixed;
}
改进/简化 yossi 的答案：
body
{
background:url('bg.png');
}
不需要声明bg-coloror repeat-x，只需要一个背景图片。
在 Chrome 18.0.1025.168、Mac OS X 10.6.8 上测试。
| 归档时间： |
|
| 查看次数： |
3743 次 |
| 最近记录： |