-2

当我单击更改文本标题时，必须在演示中随机更改。但是，如果我使用 Chrome 浏览器单击更改文本，随机文本将像图片中那样相互关联。我怎样才能防止这种违规行为？

在此处输入图像描述

<script type="text/javascript"> 
function next(tags)
{
    var hr = new XMLHttpRequest();
    var url = 'ajax_next_track.php?tags=' + tags;
    hr.open("GET", url, true);
    hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    hr.onreadystatechange = function() 
    {
        if(hr.readyState == 4 && hr.status == 200) 
        {   
           var return_data = hr.responseText;
           console.log(return_data);
           jsonObj = JSON.parse(return_data);
           document.getElementById("artist_name").innerHTML = jsonObj.artist_name;
           document.getElementById("track_name").innerHTML = jsonObj.track_name;
           document.getElementById("name").title = 'play '+jsonObj.artist_name+' - '+jsonObj.track_name+' radio';

        else
        {

        }
    }

    document.getElementById("track_name").innerHTML = 'loading...';
    document.getElementById("artist_name").innerHTML = '';
    hr.send(null); 
}


#playPauseOutDiv {
    position: relative;
    top:0px;
    width: 100px;
    height: 100px;
    border-style:solid;
    border-width:0px;
    z-index: 4;
    cursor:pointer;
    float:left;
}


#artist_name {
        position: relative;
        text-transform:uppercase;
        float:left;
        font-size: 1.9em;
        font-weight:600;
}

#track_name {
        position:relative;
        font-size: 1.5em;
        float:left;
        margin-left:15px;
        top:6px;
}


#artist_track {
    position: relative;
    float:left;
    height: 35px;
    font-family:"Arial",Georgia,Serif;
    padding-top:5px;
    padding-left:5px;
    padding-right:0px;
    color: #221E1F;

}
4

2 回答 2

2

你的CSS很糟糕。停止漂浮一切。

#artist_name不应该float:left应该 应该 是display:inline; vertical-align:baseline. #track_name不应该是float:left，position:relative而且top:6px应该是display:inline;vertical-align:baseline。

这解决了您的 chrome 问题。

您应该更改的其他内容： #artist_name不#track_name应该是 div，它们是文本，并且可能应该是跨度（自动显示：内联）。

我通常不会让 playPauseOutDiv 浮动。我会做它display:inline-blockor position:absolute;top:0;left:0，但看到它实际上是向左浮动的，这实际上是浮动的预期目的，所以你实际上是在正确使用它。

于 2013-07-12T21:31:59.130 回答
2

这是因为您正在使用float: leftand和。尝试丢失并更改和更改并添加您正在寻找的样式。您还需要设置为当前他们坐在.position: relative#track_name#artist_nameposition#track_name#artist_namedisplay: inline-blockwidth0

编辑 更改display为inline，您无需担心宽度！

于 2013-07-12T21:16:55.913 回答