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

ie7中遇到的两个问题offsetTop和tr的border

    博客分类:
  • web
阅读更多

最近在项目遇到关于IE7的两个问题,一个是offsetTop一个是tr的边框

 

一. offsetTop

 

前段时间因项目需求需要计算表格到浏览器顶部的距离,以便在滚动的时候,固定表头,很自然的用到了offsetTop这个属性

 

dom结构如下


 主要样式如下

body{
    padding-top: 100px;
    background: lightgrey;
}
div{
    border: 1px solid blue;
    padding: 50px 0;
    height: 300px;
}

 注意要div要加上height样式

 

chrome等浏览器结果如下



 

原生offsetTop和通过jquery的 offset().top取到的值一样

IE7中值如下



 原生offsetTop和通过jquery取到的是不一样的,很显然通过jquery取到的到body顶部的距离,而原生offsetTop则是到div顶部的距离,至于chrome是159,IE7是166这不用纠结,这个是ie和chrome在解析的时候的差异,这里不用管

 

上面说到要加上div高度的样式,因为如果div不设高度,chrome和ie表现是一样的。都是到body顶部的距离

 

接下来再修改一下div的样式,加上

position: relative

 同时可以去掉高度的样式

 

这样再来看看分别是什么值

chrome的表现


 

IE7的表现


 

可以看到chrome和IE7表现一致的,原生offsetTop都是相对div的距离,而jquery仍然取的是相对body顶部的距离

 

那么为什么会有时相对body,有时相对body呢。这就要看offsetParent属性了

在没有position只有高度的时候

chrome中


 
而IE7中


 

这就导致了值不一样,更多关于offsetParent的东西请自行google

 

所以,再遇到页面需要滚动到顶部然后固定表头这样需求的时候,最好选用jquery来取值,当然如果可以用

position:sticky

 这样的样式那是皆大欢喜的,都不用再去计算什么的,省了一堆事

 

 

二. tr的边框

 

dom结构如图


 样式如下

table{
    border-collapse: collapse;
}
tr{
    border: 1px solid red;
}

 在chrome等浏览器中呈现如下


 是有边框的,而在IE7中却是没有边框的,如下


 所以在要兼容IE7等低版本的浏览器的实现中还是要针对td,th来设置边框,确保显示统一

 

  • 大小: 4.4 KB
  • 大小: 1.8 KB
  • 大小: 1.8 KB
  • 大小: 5.2 KB
  • 大小: 9.9 KB
  • 大小: 15.3 KB
  • 大小: 10.3 KB
  • 大小: 17.4 KB
  • 大小: 3.1 KB
  • 大小: 2 KB
分享到:
评论

相关推荐

    JS中offsetTop、clientTop、scrollTop、offsetTop各属性介绍

    `offsetTop`和`offsetLeft`是两个常用的属性,用于获取一个元素相对于其父元素或最近的定位祖先元素(position不是static的祖先元素)的偏移量。这两个属性返回的是数值类型的数据,单位为像素。 **示例**: ```...

    Js中 关于top、clientTop、scrollTop、offsetTop

    Js中 关于top、clientTop、scrollTop、offsetTop等

    Js中_关于top、clientTop、scrollTop、offsetTop

    offsetTop 和 offsetLeft 是两个重要的属性,它们返回元素相对于其上层元素的偏移量。offsetTop 返回元素的上边缘与其上层元素的上边缘之间的距离,而 offsetLeft 返回元素的左边缘与其上层元素的左边缘之间的距离。...

    对offsetLet,offsetTop,scrollLeft,scrollTop几个方法的理解

    例如,在IE和Opera中,`offsetHeight`等于`clientHeight`加上边框厚度;而在Firefox和Safari中,`offsetHeight`指的是元素实际占用的空间高度,可能比`clientHeight`大。 #### HTML示例代码 以下是一个简单的HTML...

    在IE下:float属性会影响offsetTop的取值

    因需要定位某个HTML元素(例如:div)距离页顶的高度,想用offsetTop来取值,结果却发现CSS中如果使用了float:left;之类的写法后,竟然会导致取到的值不一样。 没有使用float:left;取的到值是正常值200; <!DOCTYPE...

    js兼容IE火狐问题

    通用的解决方案是使用`event.clientX`和`event.clientY`,它们在两个浏览器中都可用。 - **事件源**:IE使用`event.srcElement`,FF使用`event.target`。为了兼容,可以将`obj = event.srcElement ? event....

    解决ie6 select的title不能显示的问题

    在Web开发过程中,经常会遇到一些浏览器兼容性问题,特别是在处理老旧版本的Internet Explorer(IE)时更为明显。本文将针对一个特定的问题——如何在Internet Explorer 6(IE6)中使`select`元素的`title`属性能够...

    获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[

    offsetTop和offsetLeft 这两个属性,IE 、Opera和Firefox对它俩的解释存在差异: IE5.0+ 、Opera8.0+: offsetTop和offsetLeft 都是相对父级元素 Firefox1.06: offsetTop和offsetLeft 都是相对于body元素 ...

    Js中 关于top、clientTop、scrollTop、offsetTop等

    - **`screenTop`, `screenLeft`**: 这两个属性分别表示浏览器窗口相对于屏幕左上角的垂直和水平距离。这对于获取浏览器窗口相对于屏幕的位置非常有用。 - **`screen.height`, `screen.width`**: 分别表示屏幕的高度...

    Js中关于top、clientTop、scrollTop、offsetTop.pdf

    Js 中关于 top、clientTop、scrollTop、offsetTop 的详细知识点 在 JavaScript 中,理解 top、clientTop、scrollTop、offsetTop 等属性是非常重要的,这些属性都是用于获取或设置 HTML 元素的位置和尺寸的。下面...

    HTML在IE浏览器和FF浏览器中标签的使用

    在网页开发过程中,HTML元素的渲染和交互在不同的浏览器间可能存在差异,尤其是Internet Explorer (IE)和Firefox (FF)之间。这些差异主要源于浏览器对HTML、CSS和JavaScript标准的实现不同。以下是一些常见的问题及...

    JavaScript Table行定位效果

    第一个问题是fixed的tr在ie7中不能进行定位,而且td在定位后并不能保持在表格中的布局,这样在原表格插tr就没意义了。 ps:fixed的相关应用可参考仿LightBox效果。 最后我用的方法是新建一个table,并把源tr克隆到...

    获取offsetTop和offsetLeft值的js代码(兼容)

    在探讨JavaScript中获取元素位置的常用属性offsetTop和offsetLeft时,首先需要明确这两个属性分别代表的意义。offsetTop属性返回当前元素相对于其offsetParent元素顶部的距离,而offsetLeft属性则返回当前元素相对于...

    C#操作IE浏览器

    本示例中涉及到了以下几个重要的.NET Framework类和方法: 1. **`SHDocVw`** 和 **`mshtml`** 命名空间: - `SHDocVw`: 提供了对OLE Shell对象(如Internet Explorer)的访问。 - `mshtml`: 包含了HTML文档和元素...

    js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版

    在JavaScript中,`top`、`clientTop`、`scrollTop`和`offsetTop`都是用于处理元素位置和滚动状态的属性,它们各自有着特定的用途和含义。理解这些属性的区别对于进行网页布局和动态效果的实现至关重要。 1. `...

    IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)

    在IE6、IE7和IE8这三个旧版浏览器中,实现记录用户在页面上选中文本的范围是一个挑战,因为这些版本不支持W3C的DOM2级事件createRange。在支持createRange的现代浏览器如Firefox和IE9中,可以使用createRange来很...

    IE与FireFox的兼容性问题分析

    - **FF**:不支持以上两个属性。 - **通用**:`object.offsetLeft`和`object.offsetTop`。 - **窗体的高度和宽度**: - **IE**:通过`document.body.offsetWidth`和`document.body.offsetHeight`获取,需要注意...

    JS获得鼠标位置(兼容多浏览器ie,firefox)

    这两个属性分别代表了鼠标水平和垂直方向上的距离,以像素为单位,是从浏览器窗口的左上角开始计算的。 然而,IE浏览器(尤其是旧版本)的处理方式有所不同。在IE中,需要使用`event.clientX`和`event.clientY`加上...

    BlueBala » 兼容IE和Firefox的事件模型(拖动)

    在IE中,事件处理主要依赖于`attachEvent`和`detachEvent`方法,这两个方法分别用于添加和移除事件监听器。而Firefox和其他基于W3C标准的浏览器则使用`addEventListener`和`removeEventListener`方法来处理事件绑定...

    Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性第1/2页

    在Javascript拖拽系列文章中,offsetLeft、offsetTop、offsetWidth、offsetHeight四个属性都是非常重要的,它们都是关于位置定位的参数。在本文中,我们将详细介绍这四个属性的定义、用法、浏览器支持情况、注意事项...

Global site tag (gtag.js) - Google Analytics