ie下求div的绝对边距有误，求解

最新推荐文章于 2024-05-03 14:55:36 发布
最新推荐文章于 2024-05-03 14:55:36 发布
阅读量1.1k 收藏
点赞数
文章标签： div ie html firefox safari opera

这段代码在firefox和ie6下，单击div时，会弹出div的绝对上边距，
但是ff和ie6下的值不同。ff是对的，而ie是错的。
大家帮我看看这个getTop是否有问题。。。。？？？？

<script>
function getLeft(el){
        var curleft=0;
        var obj=el;
        if(obj.offsetParent){
               while(obj.offsetParent) {
                    curleft+=obj.offsetLeft;
                    obj=obj.offsetParent;       
               }
        }else if(obj.x){
            curleft+=obj.x;
        }
        return curleft;
    }
function getTop (el){
        var curtop=0;
        var obj=el;
        if(obj.offsetParent){
               while(obj.offsetParent){
                    curtop+=obj.offsetTop;
                    obj=obj.offsetParent;
               }
        }else if(obj.y){
            curtop+=obj.y;
        }
        return curtop;
    }
</script>
<table height="100%" width="100% border="1">
<tr><td align="center">
<div style="position:relative;vertical-align:middle;overflow:hidden; background-color: #009191; width:600px; height:450px;" id="motherboard" onclick="alert(getTop(this));"></div>
</td></tr></table>

 

 

 

function getOffset(obj) {
        var x = obj.offsetLeft || 0;
        var y = obj.offsetTop || 0;
        var temp = obj;
        while(temp.offsetParent) {
            temp = temp.offsetParent;
            x += temp.offsetLeft;
            y += temp.offsetTop;
        }
        return {left: x, top: y};
    }





其实最主要的原因可能是页面没有加这下面的CSS,所以导致浏览器出现解析差异。

CSS code 
   
   

    
    
    
    
*
    
    {
    
    padding
    
    :
    
    0
    
    ;
    
    margin
    
    :
    
    0
    
    ;
    
    }

 

IE 默认情况下使用 IE 盒子模型，而 Firefox 使用的是 W3C 盒子模型。

在 HTML 上加上：

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

这一句就可以让 IE 使用 W3C 盒子了。

 

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

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

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

皆可
 

在td中的元素会把第一个绝对／相对定位的hierarchy parent当作offsetParent，如果没有找到需要分三种情况讨论

　　一，如果该元素没有绝对／相对定位，则会把td当作offsetParent

　　二，如果该元素绝对／相对定位并且table没有绝对／相对定位，则会把body当作offsetParent

　　三，如果该元素绝对／相对定位并且table绝对／相对定位，则会把table当作offsetParent

看一下示例代码

1.<BODY >
<TABLE BORDER=1 ALIGN=right>
   <TR>
     <TD ID=oCell><div id="parentdiv" style="position:relative" >parentdiv<div id="sondiv">sondiv</div></div></TD>
   </TR>

</TABLE>

</BODY>



运行结果:parentdiv.offsetParent.tagName IS "body"

         sondiv.offsetParent.id     IS　"parentdiv"

2.<BODY >
<TABLE BORDER=1 ALIGN=right>
   <TR>
     <TD ID=oCell><div id="parentdiv" style="position:relative" >parentdiv<div id="sondiv"　 style="position:relative">sondiv</div></div></TD>
   </TR>

</TABLE>

</BODY> 


运行结果: parentdiv.offsetParent.tagName IS "body"

          sondiv.offsetParent.id     IS　"parentdiv"

3.<BODY>
<TABLE BORDER=1 ALIGN=right>
   <TR>
     <TD ID=oCell><div id="parentdiv" >parentdiv<div id="sondiv"　 style="position:relative">sondiv</div></div></TD>
   </TR>

</TABLE>

</BODY> 



运行结果：parentdiv.offsetParent.tagName IS "TD"

          sondiv.offsetParent.tagName    IS　"body"

4.<BODY >
<TABLE BORDER=1 ALIGN=right>
   <TR>
     <TD ID=oCell><div id="parentdiv" >parentdiv<div id="sondiv">sondiv</div></div></TD>
   </TR>

</TABLE>

</BODY> 



运行结果: parentdiv.offsetParent.tagName IS "TD"

          sondiv.offsetParent.tagName    IS　"TD"

5.<BODY>
<TABLE BORDER=1 ALIGN=right style="position:relative">
   <TR>
     <TD ID=oCell><div id="parentdiv" style="position:relative" >parentdiv<div id="sondiv"　 style="position:relative">sondiv</div></div></TD>
   </TR>

</TABLE>

</BODY>


运行结果: parentdiv.offsetParent.tagName IS "Table"

          sondiv.offsetParent.tagName IS　"parentdiv"

  js.offsetParent属性 收藏

 参考：

offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(在标准兼容模式下为html元素；在怪异呈现模式下为body元素)的引用。 当容器元素的style.display 被设置为 "none"时（译注：IE和Opera除外），offsetParent属性 返回 null。

句法：

parentObj = element.offsetParent

变量：

· parentObj 是一个元素的引用，当前元素的偏移量在其中计算。

  js.offsetParent属性 收藏
 参考：

offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(在标准兼容模式下为html元素；在怪异呈现模式下为body元素)的引用。 当容器元素的style.display 被设置为 "none"时（译注：IE和Opera除外），offsetParent属性 返回 null。

句法：

parentObj = element.offsetParent

变量：

· parentObj 是一个元素的引用，当前元素的偏移量在其中计算。

测试代码1：


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

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Untitled Document</title>

<script type="text/javascript" language="JavaScript">

function offset_init(){

var pElement = document.getElementById("sonObj");

parentObj = pElement.offsetParent;

alert(parentObj.tagName);

}

</script>

</head>

<body οnlοad="offset_init()">

<div id="parent">

             <p id="sonObj">测试OffsetParent属性</p>

         </div>

    </body>

</html>


 


测试结果：

Firefox3："BODY"

Internet Explorer 7："BODY"

Opera 9.51："BODY"

Chrome 0.2："BODY"

Safari 3："BODY


结论：

当某个元素及其父元素都未进行CSS定位时，则这个元素的offsetParent属性的取值为根元素。更确切地说，这个元素的各种偏移量计算（offsetTop、offsetLeft等）的参照物为Body元素。（其实无论时标准兼容模式还是怪异模式，根元素都为Body元素）

 

 

测试代码3：


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

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Untitled Document</title>

<style type="text/css">

#Grandfather{

position:relative;

left:25px;

top:188px;

border:1px solid black;

}

</style>

<script type="text/javascript" language="JavaScript">

function offset_init(){

var pElement = document.getElementById("sonObj");

parentObj = pElement.offsetParent;

alert(parentObj.tagName);

}

</script>

</head>

<body οnlοad="offset_init()">

<h1 id="Grandfather">

<div id="parent">

<p id="sonObj">测试OffsetParent属性</p>

</div>

</h1>

 

</body>

</html>

 

 

测试结果：

Firefox3："H1"

Internet Explorer 7："H1"

Opera 9.51："H1"

Chrome 0.2："H1"

Safari 3："H1"

 

结论：

当某个元素及其父元素都未进行CSS定位时（absolute或者relative），则这个元素的offsetParent属性的取值为在DOM结构层次中距离其最近，并且已进行了CSS定位的元素。

 


测试代码4：


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

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Untitled Document</title>

<style type="text/css">

#sonObj{

position:relative;

left:25px;

top:188px;

border:1px solid black;

}

</style>

<script type="text/javascript" language="JavaScript">

function offset_init(){

var pElement = document.getElementById("sonObj");

parentObj = pElement.offsetParent;

alert(parentObj.tagName);

}

</script>

</head>

<body οnlοad="offset_init()">

<h1 id="Grandfather">

<div id="parent">

<p id="sonObj">测试OffsetParent属性</p>

</div>

</h1>

 

</body>

</html>

 

 

测试结果：

Firefox3："BODY"

Internet Explorer 7："BODY"

Opera 9.51："BODY"

Chrome 0.2："BODY"

Safari 3："BODY"

 

结论：

当只有某个元素进行了CSS定位，其父元素及其DOM结构层次上都未进行CSS定位时，则这个元素的offsetParent属性的取值为HTMLBODYElement。更确切地说，这个元素的各种偏移量计算（offsetTop、offsetLeft等）的参照物为Body元素。

 

测试代码2：


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

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Untitled Document</title>

<style type="text/css">

#parent{

position:absolute;

                <!--position：relative;-->

left:25px;

top:188px;

border:1px solid black;

}

</style>

<script type="text/javascript" language="JavaScript">

function offset_init(){

var pElement = document.getElementById("sonObj");

parentObj = pElement.offsetParent;

alert(parentObj.tagName);

}

</script>

</head>

<body οnlοad="offset_init()">

<div id="parent">div测试代码<p id="sonObj">测试OffsetParent属性</p></div>

 

</body>

</html>

 

测试结果：

Firefox3："DIV"

Internet Explorer 7："DIV"

Opera 9.51："DIV"

Chrome 0.2："DIV"

Safari 3："DIV"

 

结论：

当某个元素的父元素进行了CSS定位时（absolute或者relative），则这个元素的offsetParent属性的取值为其父元素。更确切地说，这个元素的各种偏移量计算（offsetTop、offsetLeft等）的参照物为其父元素。

 

 

sdfsf双方各
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html界面左侧没有顶格,求解，html页面顶部有空白？？
weixin_34802266的博客
05-31 830
1、html文件字符编码已是utf-8去boom格式了；2、css代码上也置顶了但顶部还是有空白？？！！求高手解答。。。。。。43 个解决方案#1详细描述并贴代码。#2*{margin:0px;padding:0px;}#3引用2楼的回复:*{margin:0px;padding:0px;}css加了这段代码了。。。还是顶部有空白。。。ps：火狐上是正常的，可是ie跟谷歌顶部都有空...
DIV 边距属性在Chrome和IE中的区别深入理解
09-25
突然间，在Chrome下看起来很整齐的布局，在IE下变成一团糟。为了找出原因，做了一些测试，晒出来和大家分享一下
Js面试题（一）
莉莉的博客
09-11 4万+
1. javascript的typeof返回哪些数据类型. string,boolean,number,undefined,function,object 2. 例举3种强制类型转换和2种隐式类型转换? 强制（parseInt,parseFloat,number） 隐式（== ===） 3. split() join() 的区别 前者是将字符串切割成数组的形式，后者是将数组转换成字符串 4. 数组...
html顶部边距代码_求解，html页面顶部有空白_html/css_WEB-ITnose
weixin_39846612的博客
02-15 267
1、html文件字符编码已是utf-8去boom格式了；2、css代码上也置顶了 但顶部还是有空白？？！！求高手解答。。。。。。回复讨论(解决方案)详细描述并贴代码。* {margin:0px;padding:0px;}用chrome的开发人员工具看看用文本文件打开html 另存下用文本文件打开html 另存下试过了，不是字符编码的问题；我都转为utf-8去bom的格式了。。。楼主幸运了。当初我...
前端最全面试题
热门推荐
吴小迪的博客
05-04 15万+
今天给朋友们分享一到三年前端最全的面试题。 JS基础题： JS的数据类型有哪些？ 答案见：JS数据类型详解 如何判断JS变量的数据类型？ typeof() instanceof constructor toString typeof求解的可能值有哪些？ “number” “string” “boolean” “undefined” “object” “symbol” “function”...
IE6下CSS定义DIV高度的问题
12-02
来定义了一个 div 的高度，实际在 IE 下显示的仍然是一个 12 px 左右高度的层。添加overflow: hidden解决问题。 <div xss=removed></div> 在IE6中，使用CSS定义DIV的高度的时候经常遇到这个问题，就是当DIV的最小...
IE6下div层被select控件遮住的问题解决方法
12-13
这个应该在网上有很多解决的办法，只...有一个地方需要注意下，需要给iframe的z-index属性设置个负数，比如-1;不然层里的东西就看不见了 如果弹出层的高度和宽度不确定,需要用脚本取一下当前的高宽再赋给iframe一下
IE6 两个div有间隙的问题（IE 3px bug）
12-10
已存在解决方法：利用float和margin的负值偏移来实现，这两种方法虽好，但是对于前一种方法如果这两个div包含在另一个div中，且这个div已经float的话，这个方法是无效的。 本题目采用方法：即在其中的某个div的css中...
HTML_CSS学习：常用文本属性
最新发布
m0_74972727的博客
05-03 296
【代码】HTML_CSS学习：常用文本属性。
HTML：认识HTML及基本语法
2301_79263365的博客
04-30 960
标记语言中，就提供了许多的标签，不同标签有不同的功能，最终运行时，由浏览器对标签进行解析，最终呈现出不同标签的样子。
html如何实现按钮跳转，以及访问随机跳转
weixin_42759398的博客
04-29 410
html如何实现按钮跳转，以及访问随机跳转。需求看似很冷门，实际上这个对应我上一篇文章。
关于HTML
2302_80283616的博客
04-28 1085
1.HTML 指的是超文本标记语言 (Hyper Text Markup Language) ，它是用来描述网页的一种语言。2.HTML 不是一种编程语言，而是一种标记语言 (markup language)。标记语言是一套标记标签 (markup tag)。1.网页是图片、链接、文字、声音、视频等元素组成, 其实就是一个html文件(后缀名为html)2.网页生成制作: 有前端人员书写 HTML 文件, 然后浏览器打开,就能看到了网页.
常见的 HTML 标准
csdn_ad986ad的博客
04-30 688
HTML（Hypertext Markup Language）有多个版本和标准。
基于php+mysql+html图书管理系统（含实训报告）
Timi2019的博客
05-02 738
图书管理系统可实现账号的登录、退出、信息修改、挂失等功能，以及对图书的借阅、归还、逾期统计等。该系统主要针对对读者的借阅和图书馆的书籍管理。以达到管理员对图书的信息及读者借阅情况管理。通过该软件的操作练习，可以实时了解读者的个人信息以及图书的借阅信息，对读者的借阅情况进行管理和预览。系统的具体功能需求概述如下：1.账号管理：可以增加读者的信息，包括读者的各项个人信息，也可以编辑与删除各读者的信息，也可通过搜索关键字搜索读者的全部信息。
HTML_CSS学习：CSS的编写位置
m0_74972727的博客
05-01 263
【代码】HTML_CSS学习：CSS的编写位置。
学习使用html中table实现内容滚动下拉表头和左右滑动前四列固定不动的方法代码整理
徊忆羽菲
04-28 1014
学习使用html中table实现内容滚动下拉表头和左右滑动前四列固定不动的方法代码整理
useLayoutEffect 和useEffect区别
study_way的博客
04-30 720
但是在不写第二个参数的情况下，副作用函数会在每次组件更新时都被调用，这可能会导致性能问题或者不必要的副作用执行。因此，尽量在副作用函数中避免执行昂贵的操作，或者在适当的情况下通过传递依赖项来控制副作用的执行时机。中不写第二个参数时，意味着副作用函数会在每次组件渲染后都被调用，包括组件的初始渲染和每次更新。都是 React 提供的副作用钩子，用于处理组件中的副作用逻辑，平时使用较多的钩子函数。本身并不直接实现异步操作，它是 React 提供的副作用钩子，用于处理组件中的副作用逻辑。的回调函数中执行异步操作。
前端html中iframe的基本使用
Keep trying, keep going
04-30 554
的容器，通过 CSS 控制容器的样式和尺寸。此示例中的通信是在同一个域名下进行的，因此没有出现跨域问题。// 通过通过父窗口找到子窗口的window， 再向子窗口发送消息。因此，postMessage的作用是 父窗口向子窗口发送了一条消息。// 父窗口 监听子窗口发出的消息(如果有；需要注意的是，由于跨域安全策略的限制，父窗口只能与同源的。事件，当页面加载完成时，隐藏覆盖层，显示。是父窗口（当前窗口）中的一个引用，通过。中加载的文档的通信。元素嵌入子窗口的，可以通过。对象，并与子窗口进行通信。
bootstrap中的col的div总是有边距
06-09
Bootstrap 中的 col div 默认有一定的左右边距。如果你不想要这个边距，可以使用 Bootstrap 提供的 no-gutters 类。将 no-gutters 类应用于包含 col 的父级 div 中即可去除边距。例如： ```html <div class="row no-gutters"> <div class="col"> <!-- Your content here --> </div> <div class="col"> <!-- Your content here --> </div> </div> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值