位置：固定工作在IE 6/7/8和mozilla [英] Position:fixed to work on IE 6/7/8 and mozilla

问题描述

我想使一个div的位置固定在页面的右下角..（一个聊天框）..我该怎么做通过一个CSS文件，将工作在所有的IE6 / 7/8和mozilla .. ..现在我有

#chatBox {
position：fixed;
bottom：0％;
right：1％;}
这不工作在IE ..我的约束是，我只是允许编辑这个CSS文件（所以不能设置html到严格模式） 。

感谢
Mohan

解决方案

您可以使用CSS表达式修复IE。通过条件性评论将以下内容提供给IE：

  / *平滑出IE表达式滚动 -  foo不需要存在* / 
 body {
 background：url（foo）fixed ; 
} 
 
 / *固定滚动元素* / 
＃bottom-fixed-element {
 position：absolute; 
 right：0; 
 top：expression（
 document.body.scrollTop + document.body.clientHeight  -  this.clientHeight 
）; 
} 
  

如果您无法更改源以包含条件注释，你可以使用CSS hacks，但不建议这样做：

 ＃bottom-fixed-element {
 position ：固定; 
 bottom：0; 
 right：0; 
 
 _position：absolute; 
 _top：expression（
 document.body.scrollTop + document.body.clientHeight  -  this.clientHeight 
）; 
} 
  

编辑

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

  top ：expression（
（document.compatMode&& document.compatMode =='CSS1Compat'）？
（documentElement.scrollTop + documentElement.clientHeight  -  this.clientHeight）：
 body.scrollTop + document.body.clientHeight  -  this.clientHeight）
）; 
  

I want to make a div's position fixed on the bottom right of a page..( a chat box) ..how do i do that through a css file which will work on all IE6/7/8 and mozilla ....for now i have

#chatBox{ position: fixed; bottom: 0%; right: 1%;} This doesn't work on IE..and my constraint is that I am just allowed to edit this CSS file ( so can't set the html to strict mode too). Workarounds I found on the web just talk about position w.r.t to the top of the page not bottom.

thanks Mohan

解决方案

You can fix IE with CSS expressions. Serve the following to IE with conditional comments:

/* 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
   );
}

If you're not able to alter the source to include a conditional comment, you can get around it with CSS hacks, but it's not recommended:

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

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

Edit

If you need to support both quirks and standards mode, you can test in the expression:

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

这篇关于位置：固定工作在IE 6/7/8和mozilla的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！