底部有一个编辑-查找“ =====编辑====“
我在页面顶部放置一个固定的分区。放置它没问题,但是当我通过上下滚动测试页面时出现问题。
Chrome和IE一切正常,但FF存在问题。问题是在固定的划分下,行“丢失”了。也就是说,页面滚动得太远。
测试页上的分隔宽度为:80%;左边距:50px; 和不透明度:0.5这使您可以看到分隔线下方的线条。
转到测试页面并突出显示视口底部的最后一行。突出显示最后一行可以轻松发现PgDn。
现在为PgDn(或单击滚动条-滚动条,而不是滑块)
您可以重复突出显示和PgDn,它的行为应相同。
使用Chrome和IE,突出显示的行仍然可见,更重要的是,其后的行也将可见。
使用FF,突出显示的行以及其后的一两行会在固定分隔线的下方结束。突出显示的行之后的行将丢失-不可见。
我已经在其他站点上成功完成了此操作,但是我不知道他们正在做什么以使其正常运行。
此页面可与FF,Chrome和IE正常使用。还有其他人,但我现在似乎找不到它们。
这是一个与我的测试页存在相同问题的页面,不同之处在于它“浮动”除法直到滚动到顶部,然后“固定”在顶部。我也做了同样的float / fix事情,而且FF也有问题。我在上面指出的测试页只是简单地修复了部门。
与我的问题相同的那个页面的有趣之处在于,这是一个演示如何在页面顶部放置固定除法的示例,不适用于FF
yahoo.com是另一个在固定部门下丢失行的问题的页面。固定行下的行丢失几乎与我的测试页上发生的情况相同,但是yahoo比我的测试页“丢失”了更多行。
有谁知道如何在顶部固定一个分隔线并且不丢失该分隔线下方的线条,这些线条在滚动之后应该可见?我的测试适用于Chrome和IE,但不适用于FF。
并且-问题页面上没有代码段链接可用于提供演示代码吗?我在输入问题的页面上看不到它。
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Scroll Test</title>
</head>
<body style="margin-top: 0px;">
<div style="clear: both; opacity: 0.5; margin-left: 50px; width: 80%; background-color: red; top: 0px; position: fixed; height: 50px;"></div>
<div>
<script type="text/javascript">
for (i = 0; i <201; i++) {
document.writeln("*** " + i + "*************************************************************************************<br>");
}
</script>
</div>
</body>
</html>
顺便说一句-当页面右侧的分隔线固定在视口顶部时,该页面右侧的分隔线(带有粉红色背景)会出现问题-顶部被切除。看到顶部的唯一方法是向上滚动到页面顶部。在FF,IE和Chrome中会发生这种情况。
我应该在哪里报告此问题-关于“问问题页面”并提供详细信息?
=====编辑====
感谢user3137702,他告诉我将部门更改为100%。当我这样做时,滚动工作了,但是最初在页面加载时,第1行和第2行位于固定的分区下。
我将正文设置为margin:0px;我将其更改为margin-top:50px; 使第一行可见。我并不担心其他边距-左,右,下,这就是为什么我只更改了边距:0px; 到margin-top:50px; -最容易输入。
因此,完整的解决方案是将固定比例设置为width:100%;并将正文设置为margin-left:0px; 和margin-top:nnpx,其中nn是固定分隔的高度。
我将添加一些JavaScript来根据固定分隔线的高度设置主体顶部边距,这样,如果固定分隔线的高度发生变化,我就不必弄乱它。
我最初的宽度是:80px;关于分割,因为我希望固定分割显示的宽度小于中心宽度。
我采用了解决问题的代码,并在固定分区下添加了第二个分区。固定部分的背景颜色为:透明;宽度:100%。嵌套的div是内容所在的位置,并设置为width:80%margin-left:auto; 右边距:自动居中。
现在它显示为我想要的,并且可以正确滚动。
这是直到固定分隔的标记结束的新的主体定义:
<body style="margin: 0px; margin-top: 50px;">
<div style="width: 100%; background-color: transparent; top: 0px; position: fixed;">
<div style="width: 80%; margin-left: auto; margin-right: auto; background-color: red; height: 50px;">
Contents of the child division within the fixed division
</div>
</div>
<div>
再次感谢user3137702,我将选择您的答案。
拥有一切
我只是玩固定页面,发现随着视口变短,IE,FF和Chrome都开始出现滚动问题-如果您调整浏览器窗口的大小或拉起FireBug之类的东西,就会发生这种情况。
我不会花任何时间弄清楚导致浏览器开始工作异常的大小,这将是浪费时间。可以说IE和Chrome在比FF高的地方开始出现问题。但是大小是任何人都不可能遇到的。视口必须很短才能开始出现问题。
我无法确切解释为什么会发生这种情况,但是正是这种宽度弄乱了Firefox。如果将固定div的宽度设置为100%,它将按预期工作。
<div style="background-color: red; top: 0px; left: 0px; position: fixed; height: 50px; width: 100%;">
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句