2

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

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

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

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

有任何想法吗？

4

3 回答 3

3

如果我是你，我会用 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%;     
}
于 2008-11-25T22:46:55.100 回答
2

试试这里列出的方法。

于 2008-11-25T22:06:51.607 回答
0

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

  1. 创建一个绝对定位的 div 并在页面上为其指定所需的顶部和左侧坐标

  2. 设置html {overflow-y: }为隐藏或可见，而不是默认的自动或滚动以消除绝对定位的 div 的滚动条

  3. 设置body{overflow-y: }为自动或滚动为正文内容插入新的滚动条

  4. 设置body { margin:0; height:100% }以确保内容滚动条与页面的长度一致

  5. 在 body 上设置顶部和左侧边距以将内容与绝对定位的 div 分开

  6. 确保将文档类型设置为在 IE 中触发标准模式

  7. 将绝对定位的 div 设置为top:50%; left:50%;

  8. 将所需的不透明度添加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>
于 2012-01-10T02:09:26.600 回答