-2

Change text title をクリックすると、 demo でランダムに変更する必要があります。ただし、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です。

これでクロムの問題が修正されます。

変更する必要があるその他の 事項: div ではなく、テキストであり、おそらくスパンにする必要が#artist_nameあり#track_nameます (これは自動的に display:inline になります)。

通常、playPauseOutDiv をフローティングにはしません。私はそれをdisplay:inline-blockorposition:absolute;top:0;left:0にしますが、実際に左にフロートするのを見ると、これは実際にはフロートの意図された目的であるため、実際に正しく使用しています。

于 2013-07-12T21:31:59.130 に答える
2

それは、float: leftand position: relativeon #track_nameandを使用しているからです#artist_name。を失い、positionと の両方を変更して、#track_name探し#artist_nameてdisplay: inline-blockいるスタイルを追加してみてください。widthまた、現在座っているように設定する必要があります0。

EDITに 変更displayするinlineと、幅を気にする必要はありません!

于 2013-07-12T21:16:55.913 に答える