Question

这似乎我只是缺少一些语法或错误，但在ie6特定的样式表上，这将它锁定在视口的顶部并保持固定，尽管滚动：

top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');

但是，这并没有以同样的方式将其锁定在底部：

bottom: expression(0+((e=document.documentElement.scrollBottom)?e:document.body.scrollBottom)+'px');

有什么想法吗？

Answer 1

没有scrollBottom这样的属性。

bottom是定位元素的下边缘与包含块的下边缘之间的距离。假设元素不在任何其他定位元素内，那就是初始包含块，实际上是有效的初始视口。

因此，当视口从其初始（顶部）位置向下滚动时，bottom位置需要变为否定以将其向下移动以匹配：

// set from script. This is much more reliable than sniffing for
// scrollTop being zero. If your page has a Standards Mode doctype,
// which in this century it really should, then you don't need this,
// you can just always use document.documentElement.
//
var root= document.compatMode==='CSS1Compat'? document.documentElement : document.body;

/* then: */
top: expression(root.scrollTop+'px');

/* or: */
bottom: expression(-root.scrollTop+'px');

然而，还有另一个IE6错误，其中设置绝对定位元素的bottom样式实际上是相对于当前视口位置而不是初始视口位置。实际上，您设置bottom的所有内容始终为0，即使已将其设置为0 ......！

我个人仍然不会使用expression来做任何事情，即使是仅限IE6的黑客攻击。这是非常不可靠的，因为它不能总是告诉它何时需要重新计算。对我来说，我通常不会在滚动上看到表达式重新计算;还有一些调整大小，文本比例或DOM操作，它们会改变文档维度，不会触发重新教育。

最好从脚本中捕获onscroll和onresize以调用重新定位，并添加一个较慢的setInterval轮询器来为其他无法从事件中捕获的情况更新它。

示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
    <style type="text/css">
        body { margin: 0; }
        #tools {
            position: fixed; z-index: 9;
            bottom: 0; left: 0; width: 100%; height: 24px;
            background: silver;
        }
    </style>
</head>
<!--[if lte IE 6]><body class="ie6"><![endif]-->
<!--[if gte IE 7]><!--><body><!--<![endif]-->
    <div id="tools">...</div>
    ...

    <script type="text/javascript">
        // IE6 position: fixed fix
        //
        function fixFixed(element, isbottom) {
            var root= document.compatMode==='CSS1Compat'? document.documentElement : document.body;
            function setPosition() {
                if (isbottom)
                    element.style.top= (root.scrollTop+root.clientHeight-element.offsetHeight)+'px';
                else
                    element.style.top= root.scrollTop+'px';
            }
            element.style.position= 'absolute';
            window.attachEvent('onscroll', setPosition);
            window.attachEvent('onresize', setPosition);
            window.setInterval(setPosition, 5000);
        }

        if (document.body.className==='ie6')
            fixFixed(document.getElementById('tools'), true);
    </script>
</body></html>

使用“bottom：expression（0+ ...;”用于IE 6固定定位

1 个答案: