Question

When i click the Change text title has to be changed randomly in demo。但是，如果我点击使用Chrome浏览器更改文本，随机文本将会像图片一样互相锁定。我该如何防止这种不规则？

enter image description here

<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;

}

Answer 1

这是因为您在float: left和position: relative上使用#track_name和#artist_name。尝试丢失position并将#track_name和#artist_name更改为display: inline-block，然后添加您要查找的样式。您还需要将width设置为当前0。{/ p>

修改将display更改为inline，您无需担心宽度！

Answer 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-block或position:absolute;top:0;left:0，但看到它实际上向左浮动，这实际上是浮动的预期目的，所以你实际上正确使用它。

Chrome浏览器中的不规则css定位

2 个答案: