如何在 IE 6、7、8 中保留页面底部的栏或如何强制 IE 重绘界面？
我需要将一个栏粘贴到 Web 浏览器中客户端视图的底部。传统上我会使用position:fixed;除了我需要支持我的 IE 6 客户端。我有一个非常广泛的技巧，可以将栏粘贴到页面底部和内容上方，但是当用户向下或向右滚动时，栏保持固定在页面上。
为了纠正这个问题，我使用了一个 javascript 事件，该事件使用 setInterval 触发，并且在 IE (8) 的调试工具中运行该函数时，该事件触发并更改位置顶部和位置左侧属性，但页面不会重绘元素。代码有效，但元素没有移动，见下文。
提醒您一下，该修复必须在 IE 怪异模式下起作用...它不起作用如果其他 IE 版本尝试使用某个标准。相信我，我已经尝试过了。
PS 这真的很烦人，因为我也在仔细检查 IE9 支持...得到这个元素在 IE 6、7 和 8 中不随滚动条移动，但在 IE 9 中移动，并且仍然显示“IE Quirks Mode” ”。微软表示此版本不会产生任何影响，...
HTML 结构
<body>
<div id="j_zoom_area" style="zoom:100%;">
The Application area the the zoom is changed (by the bar) for accessibility...
</div>
<div id="j_protectorite">
<div class="j_bar">
<div class="j_plate">Zoom Controls, Help, Search, other misc controls</div>
<div class="j_plate">Copyright info, privacy policy, etc...</div>
</div>
</div>
<script type="text/javascript" language="javascript">
j_doBar();
</script>
</body>
该栏的 CSS 为 https://kscserver.com/ERP-API/Style/includes.css。 用于条形校正的特定 javascript。
//This controls the scrolling of the bar
function j_FixBarSlowly(){
var nTop = 0;
var nLeft = 0;
nTop = (document.body.scrollTop + document.body.clientHeight) - 67;
nLeft = document.body.scrollLeft;
//document.title = document.body.scrollTop + '+' + document.body.clientHeight + '-67' + '=' + nTop + 'px';
document.getElementById("j_protectorite").style.Top = nTop + 'px';
document.getElementById("j_protectorite").style.Left = nLeft + 'px';
document.getElementById("j_protectorite").style.Bottom = '';
document.getElementById("j_protectorite").style.Position = 'absolute';
//Ie6,7,8 hack to force redraw
}
function j_doBar() {
//j_FixBarSlowly();
//if (setInterval != undefined) {
// setTimeout("j_doBar();",5);
//} else {
setInterval("j_FixBarSlowly();",5);
//}
}
I need to glue a bar to the bottom of the client view in the web browser. Traditionally I would use position:fixed; except that I need to support my IE 6 clients. I've got a very extensive hack to glue the bar to the bottom of the page and over the content, however when the user scrolls down or right, the bar stays fixed on the page.
To correct this issue I use a javascript event that gets fired using setInterval and when running the function in IE (8)'s debug tools the event fires and changes the position top and position left attributes but the page doesn't redraw the element. The code works but the element is not moving, see below.
Just so you know, the fix has to work in IE quirks mode... it can't work if the other IE versions are trying to use a standard. Believe me, I've tried.
P.S. This is really aggravating because I'm double checking IE9 support as well... get this the element does not move with the scroll bars in IE 6, 7, and 8 but moves in IE 9 and it still displays "IE Quirks Mode." And Microsoft said that this release wouldn't effect anything,...
HTML Structure
<body>
<div id="j_zoom_area" style="zoom:100%;">
The Application area the the zoom is changed (by the bar) for accessibility...
</div>
<div id="j_protectorite">
<div class="j_bar">
<div class="j_plate">Zoom Controls, Help, Search, other misc controls</div>
<div class="j_plate">Copyright info, privacy policy, etc...</div>
</div>
</div>
<script type="text/javascript" language="javascript">
j_doBar();
</script>
</body>
The CSS for the bar is https://kscserver.com/ERP-API/Style/includes.css.
The particular javascript for the bar correction.
//This controls the scrolling of the bar
function j_FixBarSlowly(){
var nTop = 0;
var nLeft = 0;
nTop = (document.body.scrollTop + document.body.clientHeight) - 67;
nLeft = document.body.scrollLeft;
//document.title = document.body.scrollTop + '+' + document.body.clientHeight + '-67' + '=' + nTop + 'px';
document.getElementById("j_protectorite").style.Top = nTop + 'px';
document.getElementById("j_protectorite").style.Left = nLeft + 'px';
document.getElementById("j_protectorite").style.Bottom = '';
document.getElementById("j_protectorite").style.Position = 'absolute';
//Ie6,7,8 hack to force redraw
}
function j_doBar() {
//j_FixBarSlowly();
//if (setInterval != undefined) {
// setTimeout("j_doBar();",5);
//} else {
setInterval("j_FixBarSlowly();",5);
//}
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我建议使用 IE 修复工具，例如 Dean Edwards 的 IE7.js 。
该脚本在 IE 中加载页面时运行，并修复旧版本 IE 中的一些常见问题。 文档列出了它处理的内容，并包括
位置：已修复；。希望有帮助。
（当然，最好的解决方案 - 为了您的理智 - 只是放弃尝试让 IE6 看起来与较新的浏览器相同，而只是在 IE6 中使用非粘性页脚。只要它不影响可用性，我我不认为 IE6 用户的页面布局不太完美，但我知道有些人没有能力这样做，如果你的用户有要求，你就必须听他们的。不是我！）
I'd suggest using an IE fix hack, such as Dean Edwards' IE7.js.
This script runs when your page loads in IE and fixes some common problems in older versions of IE. The documentation lists the things it deals with, and includes
position:fixed;.Hope that helps.
(Of course, the best solution - for your sanity - is just to give up trying to make IE6 look identical to newer browsers, and just live with a non-sticky footer in IE6. As long as it doesn't affect usability, I don't see a problem with IE6 users having a slightly less perfect page layout. But I know some people don't have the luxury of doing that; if your users are demanding it, they're the ones you have to listen to, not me!)
经过进一步测试，最好的解决方案是使用 I Frame 作为页面内容，并在页面内容的底部放置一个 div。当然，通过一些 javascript 调整来调整大小，您就会得到一个完美的解决方案。
仅供视觉参考。
After further testing the best solution was to use an I Frame for the page content and have a div at the bottom of the page content. Of course a few javascript tweaks for proper sizing and you have a perfect solution.
Just for a visual reference.