位置：固定在IE 6/7/8和mozilla上工作

Question

我想将div的位置固定在页面的右下角..（一个聊天框）..我是如何通过一个css文件来做到这一点，它将适用于所有IE6 / 7/8和mozilla .. ..现在我有

#chatBox {  位置：固定;  底部：0％;  正确：1％;} 这不适用于IE ..我的约束是我只允许编辑这个CSS文件（因此也不能将html设置为严格模式）。我在网上找到的解决方法只是谈到位置w.r.t到页面顶部而不是底部。

感谢 莫汉

Answer 1

您可以使用CSS表达式修复IE。使用conditional comments向IE提供以下内容：

/* smooths out the IE expression scroll - foo doesn't need to exist */
body{
   background:url(foo) fixed;
}

/* fixed scrolling element */
#bottom-fixed-element {
   position: absolute;  
   right: 0;
   top: expression(
      document.body.scrollTop + document.body.clientHeight - this.clientHeight
   );
}

如果您无法更改源代码以包含条件注释，则可以使用CSS黑客攻击它，但不建议这样做：

#bottom-fixed-element {
   position: fixed;
   bottom: 0;
   right: 0;

   _position: absolute;  
   _top: expression(
      document.body.scrollTop + document.body.clientHeight - this.clientHeight
   );
}

修改

如果您需要同时支持quirks和标准模式，可以在表达式中进行测试：

top: expression(
   (document.compatMode && document.compatMode == 'CSS1Compat') ?          
       (documentElement.scrollTop + documentElement.clientHeight - this.clientHeight) :
       (document.body.scrollTop + document.body.clientHeight - this.clientHeight)
);