Question

尝试使用包含其中所有内容的单独div部分来实现对话框样式行为。

当需要显示“对话框”时，它必须显示在WINDOW的中心，而不是显示在页面的中心，即无论滚动位置如何。此外，如果用户滚动页面，正确的解决方案将不会移动“对话框”。

在Chrome和FF中，这可以使用position ='fixed'并以直观的方式对div进行居中。

这似乎在IE6中不起作用（显然不支持那里）。

有什么想法吗？

Answer 1

如果我是你，我会用jQuery来做，我建议你也尝试一下。这应该非常适合基于jQuery的解决方案[jQuery版本] [1]或尝试

body { 
    font: 80% verdana, arial, helvetica, sans-serif;        
    text-align: center; /* for IE */    
}   

#container {        
    margin: 0 auto;   /* align for good browsers */         
    text-align: left; /* counter the body center */
    border: 2px solid #000;         
    width: 80%;     
}

Answer 2

尝试使用概述here的方法。

Answer 3

使用overflow-y和绝对定位在IE6中使用以下步骤模拟固定定位：

创建一个绝对定位的div并在页面上为其提供所需的顶部和左侧坐标
将html {overflow-y: }设置为隐藏或可见而不是默认自动或滚动以消除绝对定位的div的滚动条
将body{overflow-y: }设置为自动或滚动以插入新内容的滚动条
设置body { margin:0; height:100% }以确保内容滚动条符合页面的长度
在主体上设置左上边距以将内容与绝对定位的div分开
确保将doctype设置为触发IE中的标准模式
将绝对定位的div设置为top:50%; left:50%;
将position:relative和所需的不透明度添加到容器div

如果未设置doctype，请将html规则移至body标签，并将body规则转换为包装div

<!DOCTYPE html>
<html>
  <head>
  <style>
  body { margin:0; margin-left: 14em; }

  #fixedbox { position: fixed; top: 1em; left: 1em; width: 10em; }

  #fixedbox { padding: 0.5em; border: 1px solid #000; }

  #container { height: 2000px; }

  @media,
    {
    html { _overflow-y: visible; *overflow-y: auto; }
    body { _overflow-y: auto; _height: 100%; }
    #container { _position: relative; }
    #fixedbox { _position: absolute; _top:50%; _left: 50%; }
    }
   </style>
  </head>
  <body>
    <div id="container">
      Fixed box
    </div>

    <div id="fixedbox">
      Homer
    </div>
  </body>
</html>

如何在IE6 </div>中居中<div>元素

3 个答案: