在我实现 CSS3 灵活框布局后，JQuery 拖放在 FF3.6 中不起作用，有什么想法吗？
我正在尝试使用最新的 CSS3 框模型，以使我的布局能够随着页面大小的调整而动态调整大小。问题是，在 Firefox 3.6（在 Chrome 中完美运行）中，我的拖放操作出现了错误。我不确定这是 Firefox、Jquery 还是我自己的错误？但看起来我正在拖动的克隆对象的位置为 pos.left 额外接收了 30px。
这意味着当我将按钮放入选项卡区域时，它没有正确锁定在可拖动区域（#page1）内。相反，按钮似乎神秘地位于 30px 的额外边距中。当我将按钮拖到页面底部时，由于这个“边距”，它似乎浮动在 page1 和选项卡内容之外。
此外，如果我使用 firebug 来勾画容器的轮廓，它们看起来大小都合适（没有有趣的溢出或类似的东西）。但是，如果我取出外部容器、选项卡内容、page1、页脚内的盒模型代码，并手动将选项卡内容高度设置为 800px，则错误就会消失。
这似乎发生在这里：
var pos= $(ui.helper).offset();
objName = "#clonediv"+counter;
$(objName).css({"left":pos.left,"top":pos.top});
我的代码在这里： http://jsfiddle.net/yLCZb/5/
有什么想法吗？如果我能让它在 FF 中工作，我很乐意使用这种盒模型技术。
I'm experimenting with the latest CSS3 box model to enable my layout to dynamically resize as the page resizes. The problem is that in Firefox 3.6 (works perfectly in Chrome) my drag and drop gets a bug. I'm not sure if it's a firefox, Jquery or my own error? But what it looks like is the position of the cloned object i'm dragging is receiving 30px extra for pos.left.
That means that when I drop my button into the tabbed area it isn't locked properly inside the draggable area which is #page1. Rather, it seems like there is 30px of extra margin which the button is mysteriously residing in. When I drag my button to the bottom of the page, because of this 'margin' it appears to float outside of page1 and the tab content.
Moreover, if I use firebug to outline the containers, they all look properly sized (no funny overflow or anything like that). However, if I take out the box model code inside outer-container, tab-content, page1, footer and manually set the tab-content height to say, 800px then the bug goes away.
It seems to be happening here:
var pos= $(ui.helper).offset();
objName = "#clonediv"+counter;
$(objName).css({"left":pos.left,"top":pos.top});
my code is here:
http://jsfiddle.net/yLCZb/5/
any ideas?? I'd love to use this box model technique if i could get it to work in FF..
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我不是 jquery 人员，但看起来你的 mix &文档类型的匹配使 FireFox 感到困惑。尝试使用普通的 HTML5 doctype 声明：
您还应该丢失
哈！
I'm not a jquery guy, but it looks like your mixing & matching of doctypes is confusing FireFox. Try the vanilla HTML5 doctype declaration:
<!DOCTYPE html>You should also lose the XHTML constructs and the "language" attribute from your
<script>tag.HTH!