span inside button, is not clickable in Firefox

My CODE

HTML:

<p id="console"></p>
<button>Click <span class="icon"></span>
</button>

JS:

$('.icon').click(function () {
    $('#console').html('Icon has been clicked');
    return false;
});

$('button').click(function () {
    $('#console').html('Button has been clicked');
});

CSS:

.icon {
    background-position: -96px 0;
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-top: 1px;
    line-height: 14px;
    vertical-align: text-top;
    background-image: url("http://twitter.github.com/bootstrap/assets/img/glyphicons-halflings.png"); 
    background-repeat: no-repeat;
}

Demo

Problem

I am able to click on .icon in Chrome , but not in Firefox. When I click on .icon, it clicks on whole button.

Question:

Isnt my code valid ? If my code is valid, whats the solution to this problem.

What I have tried

1. I have tried doing $('.icon').click() from console and it works perfectly in ff, so I guess the problem is that span is not clickable inside button.

2. e.preventDefault() and e.stopPropagation are not working either.

3. I've tried putting   inside span but its not working either.