关于浮动元素在IE、火狐、谷歌三大主流浏览器兼容性的一些经验

  浮动元素：笔者认为浮动元素即是在页面中可能变更位置和能够改变本身属性的一些元素

  浮动元素经常用于各种事件的响应，多争对于javascript和jquery等浏览器脚本的应用中。如：鼠标跟随、显示隐藏层等。

  对于浮动元素的定位，获取其属性时，我们可以用以下方法：

　例子：

　　javascript:
　　var divoffsettop = document.getElementById("dividname").offsetTop;　　//获取div的绝对高度
　　function getdivoffsettop()
　　{
　　　　alert(divoffsettop);
　　}

　　html:
　　<div id="dividname" style="position: absolute; left: 886px; top:20px;width:30px;height:40px;"  onmouseover="getdivoffsettop"></></div>

 

  这样使用getdivoffsettop方法是否能正确获取div的绝对高呢？一般情况下，上面的方法是绝对可行的。但是在谷歌（chrome）却是列外，它将id为dividname的div层视为可以浮动的元素，故在事件触发前后其高度可能是不一致的，也就是不安全。

  笔者自己的解决办法，对于这些浮动元素的获取属性和定位都应放在事件方法中：

　例子：

　　javascript:

　　function getdivoffsettop()
　　{
　　　　var divoffsettop = document.getElementById("dividname").offsetTop;　　//获取div的绝对高度
　　　　alert(divoffsettop);
　　}

　　html:
　　<div id="dividname" style="position: absolute; left: 886px; top:20px;width:30px;height:40px;" onmouseover="getdivoffsettop"></div>

  如果js是用的jquery

　　jquery:
　　$("#dividname").mouseover(function(){
　　　　var divoffsettop = $(this).offset().top;　　//获取div的绝对高度
　　　　alert(divoffsettop);
　　　});