Javascript 向div添加样式后出现奇怪的onclick行为

我有html：

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

结果很好（忽略字体，我安装了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);  

当我点击“+”按钮时，我看到了

缩小

！我必须单击它的外部空间才能获得

放大


jsFIDLE:
超级简单：在Chrome中，文本溢出。实际上，当你点击加号的时候，你就是在点击减号，因为这个。使用
溢出：隐藏和加号和减号将粘在按钮内。
您可以测试正确的行为。
您在哪个浏览器中测试？我只是在FF中试过，它对我很好…就我所见，它只是一些美学上的小毛病。尝试强制使用
字体系列
，如果无法使用，请尝试使用图像或更小的
字体大小
；）
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);