Странное поведение при нажатии после добавления стиля в div

Question

У меня есть html:

<div>
    <div id='icon_zoom_in' class='icon'>+</div>
    <div id='icon_zoom_out' class='icon'>-</div>
</div>  

И я добавляю CSS:

.icon{
    color: white;
    font-size: 100px;
    background-color: black;
    opacity: 0.7;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    width: 70px;
    height: 70px;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
}  

Результат хороший (игнорируйте шрифт, я установил расширение chrome):

Но когда я добавляю событие нажатия на "кнопки", происходят странные вещи:

var $ = function(id) {
    return document.getElementById(id);
}
$("icon_zoom_in").addEventListener("click", function() {
    console.log("zoom in");
}, false);
$("icon_zoom_out").addEventListener("click", function() {
    console.log("zoom out");
}, false);  

Когда я нажимаю кнопку "+", я получаю zoom out!Я должен щелкнуть по внешнему пространству, чтобы получить zoom in.
jsfiddle: http://jsfiddle.net/wong2/w2dRB/

Answer 1

Супер просто: в Chrome текст переполнен.На самом деле, когда вы нажимаете плюс, вы нажимаете минус из-за этого.Используйте overflow: hidden; и плюс и минус будут вставлять внутри кнопок. Здесь (JSFiddle) вы можете проверить правильное поведение.