Button span selektieren funktioniert nicht im Firefox

[ebody]

Hallo,

https://codepen.io/anon/pen/oagvXN

Ich habe einen Button mit einem Bootstrap Glyphicon. Es soll nur das Icon zu sehen sein. Ein :hover soll nur ausgelöst werden, wenn das Icon (<span>) selektiert wird, nicht wenn schon der Button außerhalb des Icons berührt wird.

Das funktioniert im Chrome und IE, aber nicht im Firefox

button#test{
  float: left;
  font-size: 3em;
  background: none;
  border:none;
}

span{
  color: #333;
}

span:hover{
  color: steelblue;
}

/*
button#test:hover span{
  color: steelblue;
}
*/

<button id="test">
  <span class="glyphicon glyphicon-star"></span> 
</button>

Damit es auch im Firefox funktioniert, müsste man es so schreiben

/*
span:hover{
  color: steelblue;
}
*/

button#test:hover span{
  color: steelblue;
}

Im kompletten Code arbeite ich mit Grid. Der ie11, erkennt die komplette Fläche als button#test, auch wenn der Button mit dem Icon viel kleiner als diese Fläche ist und in dieser Fläche zentriert wird. Das lässt sich auch nicht vermeiden, da noch andere HTML Elemente vorhanden sind und die Breite der Spalte erhöhen.

Gibt es eine Möglichkeit im Firefox, das span im Button zu selektieren?

Gruß ebody