固定定位和Internet Explorer浏览器

Question

固定定位和Internet Explorer浏览器

27

这是我的CSS，它在Firefox中运行良好，但在IE中不起作用。

#Createinner {
    position: fixed; 
    width: 400px; 
    height: 280px; 
    margin-left: -200px; 
    margin-top: -140px; 
    top: 50%; 
    left: 50%; 
    background-color: #ccc; 
}

如何解决这个问题。

先行致谢。

- jree

今天Smashing Magazine上发布了一篇关于负边距的文章：http://www.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/，也许它会有所帮助。 - user142019

8个回答

34

解决IE浏览器问题的方法是在以下代码中添加：

http://annevankesteren.nl/test/examples/ie/position-fixed.html

具体而言，是添加了：

 h1{
  position:fixed;
  _position:absolute;
  top:0;
  _top:expression(eval(document.body.scrollTop));
 }

- Ricardo stands with Ukraine

2

感谢您提供如此好的参考。它在IE7和IE8中测试通过，非常有效。 - Kayote

谢谢，这对我非常有效！我有另一个问题：在我的代码中，有2个div，第一个是菜单，第二个是标题（每个页面都会更改）。如何将两个div都设置为固定？我希望第二个div紧接在第一个div之后开始。 - Gerardo Abdo

1

谢谢！而且它在IE6上也可以运行...是的，我在IE6 Win XP上测试过了。 - werm098

这在IE9+中不起作用。要使其在那里工作，请访问https://dev59.com/ZIjca4cB1Zd3GeqP3u7I#29170804 - Nitesh

2

对于IE 8中的固定位置，DOCTYPE非常重要。

其中之一：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

或者

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

或者

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

或者

<!DOCTYPE HTML>

非常重要的一点是

这些需要在第一行。

css：

#footer
  {position: fixed; right: 0px; bottom: 0px; }

html:

<div id="footer" >
       Fixed Div
</div>

- ali.b.y

1

我最近写了一个 jQuery 插件，让 position:fixed 在 IE 6+ 中起作用。它在滚动时不会出现抖动，而是通过检查浏览器能力（而非用户代理）来工作，并且适用于 Internet Explorer 6、7、8。

如果您在 IE7+ 中使用严格模式，position:fixed 将被支持，但默认情况下 IE7+ 操作在 Quirks Mode 中。这个插件会检查浏览器的能力，如果不支持 position:fixed，则实现 jQuery 的修复功能。

http://code.google.com/p/fixedposition/

这样的代码可能适合你：

$(document).ready(function(){
   $("#Createinner").fixedPosition({
      debug: true,
      fixedTo: "bottom"
   });
});

您可能需要进行一些小的CSS调整才能使其适用于您的代码。目前，我正在将"偏移量"值作为选项处理。

- Chris Iona

1

IE6不支持固定定位。

如果你真的需要在IE6中使用这个功能，可以使用条件注释来提供一个仅供IE使用的CSS文件，并使用CSS表达式来模拟position:fixed。

（编辑以更正IE版本信息。）

- edeverett

答案强烈暗示IE7不支持position: fixed。实际上是支持的。 - Quentin

好的，这值得纠正，但解决方案仍然有效。 - edeverett

1

可能。还有其他因素可能会影响它。 - Quentin

0

http://ieproblems.blogspot.com/ 使用这个链接，它会解决你的问题。

#mainDiv{
overflow:auto;
}

#subDiv{
position:relative;
top:expression(this.offsetParent.scrollTop+'px');
left:expression(this.offsetParent.scrollTop+'px');
}

<html>
<head>

</head>

<body>

<div id="mainDiv">
<div id="subDiv">
This Text is Fixed
</div>
</div>

</body>

</html>

- user1241761

0

IE 8 之前的版本不支持固定定位（position fixed）。
CSS 的问题是什么？为什么它不能正常工作？在屏幕上你看到了什么？

- Frozenskys

-1

你将此标记为HTML，但``不是HTML元素。Internet Explorer不允许您样式化它不认识的元素。

- 在HTML文档中仅使用[HTML元素][1]

您已更新问题，因此似乎正在使用id选择器而不是类型选择器。这使我的原始评论无关紧要。

IE 6不支持position: fixed - 如果需要支持IE6，请使用{{link1：workarounds}}

其他版本的IE在怪异模式下不支持position: fixed - 使用{{link2：standards mode triggering Doctype}}（通常HTML 4.01 Strict是正确的选择）

- Quentin

他没有将CreateInner用作HTML元素。 - Galwegian

他正在使用Createinner作为元素的ID，这没有任何问题。 - edeverett

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Niraj · Accepted Answer

41

在页面顶部简单添加 DocType 标签即可。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

- Niraj

3

它到底如何起作用？我的意思是，背后的逻辑是什么？ - karan k

2

这并不能解决注入代码或其他无法管理的文档类型的问题，但可能是最佳的规范答案。回答上面的评论 - 这个明确声明的文档类型标签让浏览器知道它应该使用更符合标准的浏览器模式而不是怪异模式。 - Adam Tolley

注意 XHTML - 我之前只有 HTML，加上 X 才有所不同。 - gordon