奇怪的onclick行爲添加樣式後的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;，加號和減號將粘在按鈕內。 Here (JSFiddle)你可以測試正確的行爲。