title: span inside button, is not clickable in Firefox
body: <p><strong>My CODE</strong></p>
  <hr />
  <p><em>HTML:</em></p>
  <pre><code>&lt;p id=&quot;console&quot;&gt;&lt;/p&gt;
  &lt;button&gt;Click &lt;span class=&quot;icon&quot;&gt;&lt;/span&gt;
  &lt;/button&gt;
  </code></pre>
  <p><em>JS:</em></p>
  <pre><code>$('.icon').click(function () {
      $('#console').html('Icon has been clicked');
      return false;
  });
  
  $('button').click(function () {
      $('#console').html('Button has been clicked');
  });
  </code></pre>
  <p><em>CSS:</em></p>
  <pre><code>.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(&quot;http://twitter.github.com/bootstrap/assets/img/glyphicons-halflings.png&quot;); 
      background-repeat: no-repeat;
  }
  </code></pre>
  <p><a href="http://jsfiddle.net/jashwant/vFyp2/" rel="nofollow noreferrer">Demo</a></p>
  <p><strong>Problem</strong></p>
  <hr />
  <p>I am able to click on <code>.icon</code> in Chrome , but not in Firefox. When I click on <code>.icon</code>, it clicks on whole <code>button</code>.
  <br>
  <br></p>
  <p><strong>Question:</strong></p>
  <hr />
  <p>Isnt my code valid ? If my code is valid, whats the solution to this problem.
  <br>
  <br></p>
  <p><strong>What I have tried</strong></p>
  <hr />
  <ol>
  <li><p>I have tried doing <code>$('.icon').click()</code> from console and it works perfectly in ff, so I guess the problem is that <code>span</code> is not clickable inside <code>button</code>.</p>
  </li>
  <li><p><code>e.preventDefault()</code> and <code>e.stopPropagation</code> are not working either.</p>
  </li>
  <li><p>I've tried putting <code>&amp;nbsp;</code> inside <code>span</code> but its not working either.</p>
  </li>
  </ol>