【问题标题】:div position problem in chromechrome中的div位置问题
【发布时间】:2011-01-14 16:38:37
【问题描述】:

当用户将鼠标悬停在链接上时,我有一个使用 jquery 下拉的 div。 div 的 css 在这里:

.mask-layer {
    height: 0;
    overflow: visible;
    position: relative;
    top: 54px;
    float: right;
    z-index: 1000;
}
.slidedown {
    height: auto;
    width: 300px;
    background: url(../images/bg_shopping_bag_span.png); background-repeat:repeat-y;
    color: white;
}

Html 只是遮罩层 div 内的滑动 div。出于某种原因,我无法在此处发布任何角括号向您展示。

最后是 jquery:

jQuery(document).ready(function() {
    jQuery('.slidedown').hide(); 
    jQuery('a.top-link-cart').hover(function() {
        jQuery('.slidedown').stop(true, true).animate({
            height: ['toggle', 'swing'],
        }, 600, function() {});
    }, function() {
        jQuery('.slidedown').mouseout(function() {
            setTimeout(function() {
                jQuery('.slidedown').stop(true, true).animate({
                    height: '0px'
                }, 600, function() {});
            }, 200 );
        });
    });
});

该下拉菜单在 Internet Explorer 和 Firefox 中运行良好。但是在 chrome 中,向下滑动的 div 出现在页面上的错误位置。它出现在屏幕边缘页面上的所有其他 div 之外。有没有办法解决这个问题?我应该提一下,当我禁用 jquery 时,div 没有隐藏也没有动画,即使在 chrome 中它也处于正确的位置。所以也许这是jquery问题?感谢您的建议。

【问题讨论】:

  • 复制链接怎么样?实时页面或 jsfiddle.net 之类的内容都会非常有帮助。

标签: jquery html css magento


【解决方案1】:

如果从.mask-layer 中删除float: right 是否有效?

如果是这样,请尝试将clear: both 放入.slidedown

【讨论】:

  • 删除 float:right 并添加 clear:both 是一种改进。现在 div 向下滑动,但在页面的最左侧(在父 div 内),这很好。如果我不能使用浮动,我应该如何定位 .mask-layer:对吗?也许在掩码 div 中使用绝对位置?它需要在父 div 的最右侧下拉。 :)
  • 我认为必须使用绝对位置,right:0px,然后 top:100px 才能将它放到正确的位置。我不喜欢使用绝对位置,但它是相对于父 div 而不是浏览器窗口,所以我猜应该没问题。
猜你喜欢
  • 2014-10-16
  • 2013-06-06
  • 1970-01-01
  • 2010-10-22
  • 2018-01-29
  • 1970-01-01
  • 2015-03-05
  • 2014-05-20
相关资源
最近更新 更多