CSS Линии Появляющиеся

Edit: проблема, кажется, появляются только на OSX Mavericks ж/Latest Google Chrome (для меня)CSS Линии Появляющиеся

У меня есть журнал событий, который отправляет сообщения сверху вниз, и с каждым сообщением, маленький черный строки появляются в правом нижнем углу каждого сообщения, и я не могу понять, почему.

Вот рабочая версия моей игры, нажмите «Охота за кровь», и когда несколько сообщений журнала событий складываются, вы увидите, о чем я говорю.

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

Вот картина, а также:

Вот мой CSS отношение к лог сНу и сбщ DIV

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

источник

2013-11-26 Sterling Archer

Не воспроизводимые на Firefox 28, ни хрома 30. – Oriol

Ах, извинений я тестирую на Chrome –

Не воспроизводится на Chrome 31/Win 7 для меня ... –

Попробуйте использовать display: inline-table на сНу ид "бревном". Обратите внимание, что он использует встроенный CSS, который сбрасывается при каждом щелчке, поэтому вам придется перезаписать это, иначе это не сработает.

EDIT:display: table также должен работать.

источник

2013-11-26 20:48:32 Nabbit

Это прекрасно, спасибо. –

Добро пожаловать :) – Nabbit

линии, кажется, появляются потому, что вы имели border-width: 0 0 1px 0; вместо этого:

hr:before { 
    border-width: 0; 
}

Хотя, я не проверял на других браузерах, но это, кажется, работает с хромом.

источник

2013-11-26 20:30:15

Это не замечено для работы для меня –

Chrome версии 31.0.1650.57 м

исправили проблему линии за счет изменения:

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

источник

2013-11-26 20:30:33 Culyx

Я уже сказал, что удаление 'addBorder()' не работает в комментариях, извините. –

Я проверил это изменение в кодефене, и он правильно удалил черные линии без необходимости переместить или «обновить» журнал; Я должен добавить, что у моего хром нет плагинов на окнах 7 – Culyx

Я знаю, я тоже его тестировал, и проблема остается на моем конце –

Есть еще один потенциальный затруднительное для вас, изменить 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; 
}

источник

2013-11-26 20:53:55 Culyx

yup попробовал это, он работает, но он работает, заставляя div использовать все пространство и скрывать/перекрывать черные линии. – Nabbit

CSS Линии Появляющиеся

ответ

Смежные вопросы