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

【问题标题】：Irregularity css positioning in Chrome BrowserChrome浏览器中的不规则css定位
【发布时间】：2013-07-11 12:39:24
【问题描述】：

When i click the Change text title has to be changed randomly in 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;

}

【问题讨论】：

你会想弄清楚是什么原因造成的，然后解决它。
我会帮忙的。但老实说......我不想通读你所有的代码来弄清楚发生了什么。请仅发布相关部分而不是整个转储。
新加载的文本宽度较小，文本似乎不适合。
WTF 是你的 CSS 开头的那一堆类？！？！
没有通读所有代码，我猜你使用 position: fixed 从页面流中删除了一些文本。

标签： javascript css google-chrome cross-browser

【解决方案1】：

这是因为您在 #track_name 和 #artist_name 上使用了 float: left 和 position: relative。尝试丢失 position 并将 #track_name 和 #artist_name 更改为 display: inline-block 并添加您正在寻找的样式。您还需要设置width，因为他们目前坐在0。

编辑把display改成inline就不用担心宽度了！

【讨论】：

【解决方案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，它们是文本，并且应该是 span（自动显示：内联）。

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

【讨论】：

感谢您的建议，我正在进行中:)