div Position Problem in Chrom

Question

Ich habe ein div, das mit jquery ablegt, wenn ein Benutzer über einen Link mouses. Die CSS für das div ist hier:

.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 ist einfach die slidedown div in der Maske-Schicht div. Aus irgendeinem Grund kann ich hier keine Winkel-Brackers posten, um es dir zu zeigen.

Und schließlich die 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); 
     }); 
    }); 
}); 

Der Rückgang arbeitet gut an in Internet Explorer und Firefox. In Chrome erscheint jedoch das Diver-Divert-Element an der falschen Position auf der Seite. Es erscheint außerhalb aller anderen divs auf der Seite am Bildschirmrand. Gibt es eine Möglichkeit, das zu beheben? Ich sollte erwähnen, wenn ich die Jquery deaktivieren, so dass das div nicht versteckt und nicht animiert ist, ist es in der richtigen Position auch in Chrom. Vielleicht ist das also ein Problem von jquery? Danke für jeden Hinweis.

Answer 1

Funktioniert es, wenn Sie die float: right aus der .mask-layer entfernen?

Wenn ja, versuchen clear: both in .slidedown