`
liudaoru
  • 浏览: 1578834 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

绝对居中定位(计算滚动位置,IE & FF)

    博客分类:
  • Ajax
IE 
阅读更多
  function toWinCenter(id) {
   var obj = $(id);
   var top = document.body.scrollTop + (window.innerHeight || document.body.offsetHeight) / 2 - obj.offsetHeight / 2;
   var left = (window.innerWidth || document.body.offsetWidth) / 2 - obj.offsetWidth / 2;
   obj.style["left"] = left + "px";
   obj.style["top"] = top + "px";
  }
 <div id="mbox" style="position:absolute;z-index:10;width:300px;height:200px;background:#f0f0f0;border:1px solid #c0c0c0;left:0px;top:0px;padding:10px;">TRS-bwl</div>
分享到:
评论
3 楼 xqstation 2008-07-03  
document.body.clientHeight

这个。但是好象IE的总是不对。。。
去他大爷的。烦死了。
诅咒IE6。。。
2 楼 xqstation 2008-07-03  
哦。也不对。。。那是屏幕的。。。
烦。破IE不支持fix
1 楼 xqstation 2008-07-03  
document.body.offsetHeight
改成window.screen.availHeight比较好。
IE6下offsetHeight是根据内容来变的。
也就是当内容长的时候,不是显示在屏幕中间。
window.screen.availHeight是个固定值

相关推荐

    兼容ie,FF,chrome,opera的弹出层居中js

    标题“兼容ie,FF,chrome,opera的弹出层居中js”所指的就是一个JavaScript实现的弹出层(popup layer)定位代码,它能在Internet Explorer(IE)、Firefox(FF)、Chrome以及Opera这些主流浏览器中实现居中显示。...

    基于Jquery可居中显示并兼容IE6+/FF等浏览器的瀑布流程序(jquery.easing.js,jquery.vgrid.js实现)

    - 计算元素位置:新加载的元素需要插入到正确的位置,使得整个布局保持“瀑布”效果。 - 兼容性处理:对于老版本的浏览器,可能需要使用特定的CSS Hack或者JavaScript补丁来确保样式和功能的正常。 5. 使用方法:...

    如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器.pdf

    FF和IE对盒模型(Box Model)的解释不同,导致边距和内填充计算有差异。可以通过重置CSS样式,如`box-sizing: border-box;`来统一处理。 5. **链接样式与浮动元素**: - FF中,链接添加边框和背景色需要`display:...

    DIV+css兼容性FFIE6IE7IE8IE9[借鉴].pdf

    本文档“DIV+css兼容性FFIE6IE7IE8IE9[借鉴].pdf”主要关注如何处理Firefox和不同版本的Internet Explorer(IE6、IE7、IE8、IE9)之间的CSS差异。以下是一些关键知识点的详细说明: 1. **CSS Hack**: - CSS Hack...

    固定位置显示弹出层(兼容IE6,IE8,FF)

    在本例中,通过结合使用`position: fixed`、`absolute`定位、JavaScript表达式以及特定的浏览器hack,成功实现了在IE6、IE8和Firefox中弹出层的固定位置显示。在实际开发中,还应注意测试不同浏览器和版本的行为,以...

    web前端开发基本问题解决

    IE6下绝对定位的容器内文本无法正常选择的问题 IE6下为什么图片下方有空隙产生 IE6下这两个层中间怎么有间隙 list-style-image无法准确定位的问题 LI中内容超过长度后以省略号显示的方法 web标准中定义id与class有...

    css浏览器兼容整理

    6. **IE6下绝对定位的容器内文本无法正常选择** - 这是一个已知的IE6问题。可以通过设置`position: relative;`和`z-index`来解决。 7. **CSS双线凹凸边框** - 可以使用多重`border`或`box-shadow`来创建双线...

    IE FF OPERA都可用的弹出层实现代码

    然后,通过获取当前文档的滚动位置和窗口尺寸,计算出弹出层的`top`和`left`值,使其居中显示。这是通过`document.documentElement.scrollTop`和`clientHeight`等属性实现的。 随后,创建了一个名为`imgs`的子`div`...

    Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF

    `url("Images/body_bg.jpg")`表示背景图片的路径,`repeat`属性使得背景图片能够平铺,`center`和`0`设置背景图片在水平方向居中以及垂直方向位置为0,`fixed`属性保证背景图片固定不动,即在页面滚动时背景图不会随...

    浏览器兼容性汇总

    **解决方案**: 确保元素具有明确的尺寸和位置,使用绝对定位或固定定位。 ##### 15. float的div闭合;清除浮动;自适应高度 - **IE**: 浮动元素可能导致父元素高度塌陷。 - **Firefox等其他浏览器**: 通常表现一致。...

    让div层随鼠标移动的实现代码 ie ff

    在示例代码中,`.center_div2` 是我们关注的div层,它被设置为绝对定位(`position: absolute;`),以便我们可以自由地改变其在页面上的位置。`z-index: 1;` 确保div层位于其他元素之上,`text-align: center;` 用于...

    DIV-CSS-必考题.docx

    知识点解析:在 HTML 中,使一个层垂直居中于浏览器中可以使用绝对定位和负值 margin 的方法,这样可以使层垂直居中于浏览器中。 8. Firefox 嵌套 div 标签的居中问题 问题描述:假定有如下情况:&lt;div id="a"&gt;&lt;div...

    DIV+CSS必考题.pdf

    7. 垂直居中的实现:使用绝对定位结合`top:50%`和负外边距可以实现层在浏览器中的垂直居中。负外边距的值等于层自身高度的一半。 8. Firefox中嵌套div的居中问题:在Firefox中,若要使嵌套的div在父div中水平居中,...

    网站美工面试题DIV+CSS最有可能遇到的八个问题

    实现一个层在浏览器中垂直居中,可以使用绝对定位结合负外边距。例如,一个200px宽高、红色边框的层,可以这样设置CSS:`position:absolute;top:50%;left:50%;margin:-100px 0 0 -100px;`。 8. **Firefox嵌套div...

    css常见考题 !!css常见考题 css常见考题

    - **问题描述:** 如何使一个绝对定位的元素在页面中居中显示。 - **解决方案:** - 通过设置`position: absolute; top: 50%; left: 50%;`并调整`margin`值来实现。 - **示例代码:** ```css .abs-center { ...

    46种常见的浏览器兼容性问题大汇总

    20. 为什么web标准中IE无法设置滚动条颜色了 3 21. 为什么无法定义1px左右高度的容器 3 22. 链接(a标签)的边框与背景 3 23. 超链接访问过后hover样式就不出现的问题 3 24. FORM标签 3 25. 属性选择器(这个...

    软件工程师 面试题 DIV+CSS_必考题

    使用绝对定位可以实现层在浏览器中的垂直居中,代码如下: ```css div { position: absolute; top: 50%; left: 50%; margin: -100px 0 0 -100px; width: 200px; height: 200px; border: 1px solid red; }...

Global site tag (gtag.js) - Google Analytics