Question

编辑：问题似乎只出现在OSX Mavericks w / Latest Google Chrome（对我来说）

我有一个事件日志，从上到下发布消息，每条消息都会在每条消息的右下方出现小黑线，我无法弄清楚原因。

这是我的游戏的工作版本，点击“寻找血液”，当一些事件日志消息堆叠起来时，你会看到我在说什么。

这也是一张照片：

这是我与log div和msg div相关的CSS

.msg {
    float: left;
    width:auto;
    overflow:auto;
    padding: 5px;
    font-size: small;
}
.column {
    padding:3px;
    float: left;
    width:30%;
    border:1px solid black;
    background-color:#222222;
} /* Hidden Elements */
.hp, .cycle, .gold, .log, .middleCol, 
.battle, .hiddenCounter {
    display:none;
}

这是我的HTML架构。

<!DOCTYPE html>
<html>
    <head>
        <title>A Vampire's Hunt</title>
        <link rel="stylesheet" href="vamp.css">
    </head>
    <body>
    <h1 class="title">A Vampire's Hunt</h1>
    <div class="main">
        <div id="stats" class="column">
            <div>
                <h3 class="miniTitle">Stats</h3>
                <hr />
                <span id="spanCounter" class="hiddenCounter noRed">You have been dead for <span id="counter">0</span> hour<span id="singularHours" class="noRed"></span>..</span>
                <span id="spanInitMsg" class="spanInitMsg noRed">You are dead!</span>
            </div>
            <div id="divCycle" class="cycle">It is currently: <span id="cycle"></span></div>
            <div>Blood: <span id="blood">0</span></div>
            <div class="hp" id="hpDiv">HP: <span id="hp">20</span></div>
            <div class="gold" id="goldDiv">Gold: <span id="gold">0</span></div>
            <h3 class="miniTitle">Actions</h3>
            <hr />
        </div>
        <div id="middleCol" class="column middleCol">
            <div id="shop" class="shop">
                <h4 class="miniTitle">A Dark Alleyway</h4>
                <hr />
                Herp Derp Derp
            </div>
            <div id="battle" class="battle">
                <hr />
            </div>
        </div>
        <div id="log" class="log column">
            <h3 class="miniTitle">Event Log</h3>
            <hr />
            <div id="msg" class="msg"></div>
        </div>
    </div>
        <script src="player.js"></script>
        <script src="element.js"></script>
        <script src="engine.js"></script>
        <script src="vampire.js"></script>
        <div class="footer">
            <a href="https://github.com/RUJodan/js-vampire">Follow This Project on Github!</a>
        </div>
    </body>
</html>

我不认为JavaScript是罪魁祸首，但以防万一，这里是事件日志功能，以及它调用的函数。

eventMsg : function(txt) {
    this.addBorder("log");
    this.showElement("log","block");
    var msg = document.getElementById("msg");
    txt = "-"+txt+"<br />"+msg.innerHTML;
    msg.innerHTML = txt;
},
addBorder : function(id) {
    document.getElementById(id).style.border = "1px solid black";
},
showElement : function(id,style) {
    document.getElementById(id).style.display = style;
},

这似乎适用于FireFox和Safari，但不适用于Chrome。

Answer 1

尝试在div id“log”上使用display: inline-table。请注意，它使用在每次单击时重置的内联CSS，因此您必须覆盖它，否则它将无法工作。

编辑： display: table也应该有用。

Answer 2

似乎出现了这些行，因为您有border-width: 0 0 1px 0;而不是：

hr:before {
    border-width: 0;
}

虽然，我还没有在其他浏览器上测试过，但它似乎与chrome配合使用。

Answer 3

Chrome版本31.0.1650.57 m

通过更改：

修复了行问题

eventMsg : function(txt) {
    this.addBorder("log");
    this.showElement("log","block");
    var msg = document.getElementById("msg");
    txt = "-"+txt+"<br />"+msg.innerHTML;
    msg.innerHTML = txt;
},
addBorder : function(id) {
    document.getElementById(id).style.border = "1px solid black";
},
showElement : function(id,style) {
    document.getElementById(id).style.display = style;
},

为：

eventMsg : function(txt) {
    this.showElement("log","block");
    var msg = document.getElementById("msg");
    txt = "-"+txt+"<br />"+msg.innerHTML;
    msg.innerHTML = txt;
},
addBorder : function(id) {
    document.getElementById(id).style.border = "1px solid black";
},
showElement : function(id,style) {
    document.getElementById(id).style.display = style;
},

Answer 4

为您提供另一个潜在的解决方案，更改css：

.msg {
    float: left;
    width:auto;
    overflow:auto;
    padding: 5px;
    font-size: small;
}

到

.msg {
    float: left;
    width:100%;
    overflow:auto;
    padding: 5px;
    font-size: small;
}

CSS线出现

4 个答案: