gpt4 book ai didi

javascript - 出现 CSS 行

转载 作者:可可西里 更新时间:2023-11-01 14:50:36 24 4
gpt4 key购买 nike

编辑:这个问题似乎只出现在带有最新 Google Chrome 的 OSX Mavericks 上(对我而言)

我有一个事件日志,从上到下发布消息,每条消息的右下角都会出现黑色小线,我不明白为什么。

这是我的游戏的工作版本,单击“Hunt for Blood”,当一些事件日志消息堆积起来时,您就会明白我在说什么。

http://codepen.io/RUJordan/pen/dcwLC

还有一张图片:

http://i.stack.imgur.com/q1AMR.png

这是我的与日志 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。

最佳答案

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

编辑: display: table 应该也可以。

关于javascript - 出现 CSS 行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20227115/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com