HTML文本覆盖自己

Question

将一些纯文本作为html通过ajax（jQuery）粘贴到div中后，文本会覆盖自己。

我不知道发布我的所有代码是否有帮助，但也许有人之前遇到过同样的问题，可以给我一个提示。

我正在使用Symfony2和jQuery（ajax请求来执行操作）。

这里是ajax请求和回调：

$('.tile').click(function(e){
    e.preventDefault();

    var thisTileImg = e.target
    var x = thisTileImg.x;
    var y = thisTileImg.y;
    var tileID = thisTileImg.id;

    // execute ajax-request to turnAction and give parameters for x and y of the tile
    var request = $.ajax({
      url: pathTurnAction,
      type: "POST",
      data: {'x':x, 'y':y, 'tileID':tileID},
      dataType: "html"
    });

    request.done(function(msg) {
        var obj = jQuery.parseJSON(msg);
        switch(obj.result){
            case -1:
      showPopup(obj.text, obj.button);
                break;
            case 0:
                thisTileImg.src = pathTileImg0;
                break;
            case 1:
                thisTileImg.src = pathTileImg1;
                break;
        }
        $('#attempts_left').html(obj.attempts);
    });

    request.fail(function(jqXHR, textStatus) {
        // TODO: do something with the error
        // ...
        alert( "Request failed: " + textStatus );
    });

});

function showPopup(text, button){
    $('#overlay_popup_text').html(text);
    $('#overlay_popup_button').html(button);
    $('#overlay_bg').show();
    $('#overlay_popup').show().center();
}

和html / css

<div id="overlay_bg"></div>
<div id="overlay_popup">
  <div id="overlay_popup_text"></div>
  <div id="overlay_popup_button"></div>
</div>

#overlay_bg {
width: 100%;
height: 1900px;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
display: none;
background: rgba(0, 0, 0, 0.75);
-moz-transition: opacity 1.5s;
-o-transition: opacity 1.5s;
-webkit-transition: opacity 1.5s;
z-index: 10000;
}

#overlay_popup {
width: 200px;
height: 200px;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
display: none;
padding: 15px;
background-color: #fff;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
z-index: 10001;
}

#overlay_popup_text {
  height: 80px;
}
#overlay_popup_buttons {
  height: 80px;
}

Answer 1

解决方案是与CSS相关的。行高为0.文本只是一直在自己写作。