leisure55 2009-06-09 09:47
浏览 202
已采纳

firefox offset问题

最近在做一个在线画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]
tO 三楼同学:
这个table是用js动态产生地,可以增删行列以及拆分合并等等。
里面有几个算法要用到offsetLeft以及offsetWidth来判断单元格之间的位置才能决定下一步操作,比如增加一列时候(考虑非常不规则table情况)
我提的情况并不是每次都出现,可能在连续一些操作后(如增加列)若干次后出现。
恩 我尝试把错误结果提交下
[b]问题补充:[/b]
把出现问题的页面提交了
error.html页面

注意用firefox打开,点击单元格即可,里面的js函数为自己加入
[b]问题补充:[/b]
呵呵 多谢三楼同志的解答 至少晓得问题所在了
虽然我要求的效果是 :
border-collapse : collapse
如果是 separate 边框太粗
不过还是散分吧
恭喜发财

  • 写回答

9条回答 默认 最新

  • ywbanm 2009-06-09 18:11
    关注

    仔细试了下,发现把table的Css: border-collapse: collapse; 去掉
    IE和FF就一样了。

    语法:
    border-collapse : separate | collapse
    取值:
    separate :  默认值。边框独立(标准HTML)
    collapse :  相邻边被合并

    看来是FF对这个CSS2属性的解析有问题,IE解析这个属性更有问题,4个td的宽度都不一致。

    累死我了,快给分。。。。 :twisted:

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(8条)

报告相同问题?

悬赏问题

  • ¥15 如何用MATLAB实现以下三个公式(有相互嵌套)
  • ¥50 安装华大九天aether
  • ¥30 关于#算法#的问题:运用EViews第九版本进行一系列计量经济学的时间数列数据回归分析预测问题 求各位帮我解答一下
  • ¥15 setInterval 页面闪烁,怎么解决
  • ¥15 如何让企业微信机器人实现消息汇总整合
  • ¥50 关于#ui#的问题:做yolov8的ui界面出现的问题
  • ¥15 如何用Python爬取各高校教师公开的教育和工作经历
  • ¥15 TLE9879QXA40 电机驱动
  • ¥20 对于工程问题的非线性数学模型进行线性化
  • ¥15 Mirare PLUS 进行密钥认证?(详解)