элемент внутри кнопки button
 

Есть кнопка

.iconBtn{
    padding:0;
    border:0;
    background:transparent;
    position:relative;
    display:inline-block;
}

.icon{
    position:absolute;
    top:50%;
    left:0;
    background: url('Images/eSFX-Sprite.png') 0 0 no-repeat;
}

.searchBtn{
    width:19px;
}

.searchBtn .icon{
    width:19px;
    height:19px;
    margin-top:-9px;
    background-position:-403px -723px;
}

<button class="iconBtn searchBtn"><span class="icon"></span>&nbsp;</button>

Внутри кнопки(тег button) есть спан, который аболютно позиционируется относительно button-а. Почему-то курсор(cursor:pointer) с тега button не наследуется спаном. Если же заменить тег button на тег a(ссылка), то наследование курсора(cursor:pointer) происходит. В чем дело? Пробовал даже спану принудительно задать

.searchBtn .icon{
    cursor:pointer;
}

Не работает! курсор при наведение не появляется. что за дела? По-моему также не передается клик тегу button, если кликнуть на спан. А если заменить тег button на тег a, то передается.

Вот пример
http://jsfiddle.net/S6tw4/

очевидно, это проблема firefox