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

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

一. offsetTop

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

dom结构如下

ie7中遇到的两个问题offsetTop和tr的border
 主要样式如下

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

 注意要div要加上height样式

chrome等浏览器结果如下


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

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

IE7中值如下


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

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

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

position: relative

 同时可以去掉高度的样式

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

chrome的表现

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

IE7的表现

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

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

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

在没有position只有高度的时候

chrome中

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

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

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

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

position:sticky

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

二. tr的边框

dom结构如图

ie7中遇到的两个问题offsetTop和tr的border
 样式如下

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

 在chrome等浏览器中呈现如下

ie7中遇到的两个问题offsetTop和tr的border
 是有边框的,而在IE7中却是没有边框的,如下

ie7中遇到的两个问题offsetTop和tr的border
 所以在要兼容IE7等低版本的浏览器的实现中还是要针对td,th来设置边框,确保显示统一

相关推荐