AJAX/jQuery和Chrome的奇怪行为

Question

我认为检查问题的最佳方法是访问它:

打开页面,它应该加载底部Alptraum - La Vie Fascinante D'Une Jeune Vierge Effarouchee Marnaise - 未知日期归功于这个jQuery脚本:

$.ajax ({
    url: "list/browse_ajax.php",
    type: "POST",
    success: function(data) {
        $('#browseList').html(data);
    },
    error: function(data) {
        $('#browseList').html("Error");
    }
});

在服务器上,它回复:

<script type="text/javascript">
    $(document).ready(function() {
        $('.lists').mouseover(function() {
            $(this).css("background-color", "#CCCCCC");
        });

        $('.lists').mouseout(function() {
            $(this).css("background-color", "#FFFFFF");
        });                 
    });
</script>       

<div class="lists">                                 
    <a class="lblackb" href="index.php?explore=view&trackid=888"><?=htmlentities("Alptraum - La Vie Fascinante D'Une Jeune Vierge Effarouchee Marnaise - Unknown Date", ENT_QUOTES, "UTF-8")?></a>
</div>  

用这个列出类:

.lists{width:710px; float:left; border-bottom:1px #000000 solid;}

这是browseList div:

.content{width:710px; float:left; color:#000000; font-weight:normal; text-align:left; margin-left:13px; margin-right:13px;}    
<div class="content" id="browseList">&nbsp;</div>

但你怎么看,直到你不用鼠标继续div(应用jQuery鼠标悬停/效果),你可以看到整行(至少,当我加载页面时,我只看到一小部分为Vierge Effarouchee Marnaise - 未知日期.

这种情况发生在我身上只有Chrome(8.0.552.237)

为什么这个？我该如何解决这个问题呢？谢谢

PS只有在#browseList'div(with .html())中写了1行才会发生这种情况.因此,例如,如果我只是<br/>在该行之前或之后添加,则不会发生这种情况:O

PS2.我也注意到,如果我多次刷新页面,有时候它有点适用,有时会出现问题...真的很奇怪!我认为这是一个Chrome bug ...

Answer 1

我认为你不需要div 类列表

 float: left; /* delete this line */