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

最近在项目遇到关于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来设置边框，确保显示统一