最近在做一个在线画table的东东,javascript实现。
在做一些算法时，需要用到offsetLeft,offsetWidth等一些属性，这些东东在ie下用得很好，但是到了firefox出了些问题。
简单描叙下:
[code="java"]
function testThisOffset(o){
if(o.tagName == 'TD')
o=o.parentNode;
var warnings ="";
for(var q=0;q<o.cells.length;q++){
var oTd = o.cells[q];
warnings +="**************\n";
warnings +=" cell "+q+":"+oTd.offsetLeft+","+oTd.offsetWidth+"\n";
}
alert(warnings);
}
[/code]
打印一行中，每个单元格的offsetLeft以及offsetWidth值。
firefox中，出现了如下值:
[code="java"]
**************
cell 0:1,140 // 0为cellIndex,1为该单元格offsetLeft,140为该单元格offsetWidth
**************
cell 1:141,140
**************
cell 2:281,140
**************
[b]cell 3:420,140[/b]
[/code]
cell 0,1,2没问题，但是cell 3出现了问题,因为其 offsetLeft值为420 是小于cell2的281+140的，
问：这是为何了，有什么办法可以保:nextCell.offsetLeft>=cell.offsetLeft+cell.offsetWidth?
[b]问题补充：[/b]
ps1:
三楼提供的方法我早已尝试，数据还是存在类似的问题，
[b]问题补充：[/b]
ps2.真是头疼啊 表格中的同一列竟然也有offsetLeft不同的情况
IE中堪称完美，到了firefox竟然这么多问题.
firefox真的比IE好吗？
[b]问题补充：[/b]
多谢三楼同志的关注，我也看了文档。
有如下:
[b]That is to say, Firefox 2 includes any border width of the offsetParent element when calculating offsetLeft whereas Firefox 3 ignores this setting. [/b]
我的是firefox3,所以应该是把offsetparent的border忽略了
这个javaeye现在搞成这样了，发帖都不容易了 诶
[b]问题补充：[/b]
不知道有解决办法没
不然就只能采取一个不是办法的办法
把两个offsetLeft之间绝对值<=1的 就算相等了
不过这样感觉 很别扭
继续求好的方法
[b]问题补充：[/b]
我的这个没有涉及到div 纯table td 有style
[b]问题补充：[/b]
我觉得可能不是获取值的方法出问题了 可能是firefox本身的问题了
现在是两个td的相对比较，
如果三楼同学的 加上offsetParent的boader，这两个都要加上啊，这两个相邻td同一个offsetParent
所以加上后虽然单个绝对位置值变化了，但是两个各之间相对值还是没变地
依然是:
前一个Td的offsetLeft+前一个TD的offsetWidth大于后一个td的offsetLeft
莫名其妙的问题啊
ie chrome都是等于或者小于的说
就firefox出现大于
[b]问题补充：[/b]
我觉得可能不是获取值的方法出问题了 可能是firefox本身的问题了
现在是两个td的相对比较，
如果三楼同学的 加上offsetParent的boader，这两个都要加上啊，这两个相邻td同一个offsetParent
所以加上后虽然单个绝对位置值变化了，但是两个各之间相对值还是没变地
依然是:
前一个Td的offsetLeft+前一个TD的offsetWidth大于后一个td的offsetLeft
莫名其妙的问题啊
ie chrome都是 等于或者小于的说
就firefox出现 大于
[b]问题补充：[/b]
ｔＯ 三楼同学:
这个table是用js动态产生地，可以增删行列以及拆分合并等等。
里面有几个算法要用到offsetLeft以及offsetWidth来判断单元格之间的位置才能决定下一步操作，比如增加一列时候（考虑非常不规则table情况）
我提的情况并不是每次都出现，可能在连续一些操作后（如增加列）若干次后出现。
恩 我尝试把错误结果提交下
[b]问题补充：[/b]
把出现问题的页面提交了
error.html页面
注意用firefox打开，点击单元格即可，里面的js函数为自己加入
[b]问题补充：[/b]
呵呵 多谢三楼同志的解答 至少晓得问题所在了
虽然我要求的效果是 ：
border-collapse : collapse
如果是 separate 边框太粗
不过还是散分吧
恭喜发财
仔细试了下，发现把table的Css： border-collapse: collapse; 去掉
IE和FF就一样了。
语法：
border-collapse : separate | collapse
取值：
separate : 默认值。边框独立（标准HTML）
collapse : 相邻边被合并
看来是FF对这个CSS2属性的解析有问题，IE解析这个属性更有问题，4个td的宽度都不一致。
累死我了，快给分。。。。 :twisted:
firefox 下的确是有offset这种问题，好像没什么办法
做这种多浏览器支持的确是非常头痛的事，建议使用三方库如jQuery, ext之类，还有一个javascript 2d库，特别好用，名字好像叫：rapheal.js, 特别推荐之。
这些三方库的最好的地方就是支持多浏览器，祝你好运。
在IE中obj.offsetLeft是当前对象对上body对象的位移, 可是在Firefox里中,obj.offsetLeft中争对其父节点的,了解其存在的差异之后,可以使用如下代码解决之,
[code="js"]function getOffsetLeft(o)
{
var left=0;
var offsetParent = o;
while (offsetParent!=null && offsetParent!=document.body)
{
left+=offsetParent.offsetLeft;
offsetParent=offsetParent.offsetParent;
}
return left;
}[/code]
[url=http://www.myhorde.net/blog/?p=44]原文[/url]
[url]http://www.alanamos.de/articles/firefox_2+3_offset_attributes.html[/url]
大概看了一下,"Bothe Firefox 2 and Firefox 3 return offsetLeft values of 15px for both demo examples, which means that they both ignore the border of the offsetParent element. "
好像说FF没有加上offsetParent的border，加上borderWidth 试试。
left+=offsetParent.offsetLeft + offsetParent.style.borderWidth ;
如果你想彻底弄清楚这个问题，就先好好看看CSS的盒模型,IE和Mozilla浏览器对盒模型的解释不一致.
[url]http://www.w3cn.org/article/tips/2004/44.html[/url]
Browser之间没有绝对的谁好谁坏,只是IE6之前，IE对W3C一直熟视无睹，这让许多网页设计者都大为光火。
?还不行么？
你试着把offsetParent的border加上了么？
能不能发个测试的sample上来？
自己写了个test:
[code="html"]
function testThisOffset(o){ if(o.tagName == 'TD') o=o.parentNode; var warnings =""; for(var q=0;q<o.cells.length;q++){ var oTd = o.cells[q]; warnings +="**************\n"; warnings +=" cell "+q+":"+oTd.offsetLeft+","+oTd.offsetWidth+"\n"; } alert(warnings); }| 1 | 1 | 1 | 1 |
<br> testThisOffset(document.getElementById('test'));<br> [/code]
在IE8和FF3上测试，结果都是一样的，你用的是版本是什么？