php / javascript按钮中的按钮在firefox中不起作用

First of all, i'm creating button in php/html

<button class="accordionLic" id="<?php echo 'accordionClass'.$lic_num?>">#<?php echo $lic_num; ?></button>

We can call it 'big button'

When document is ready, script is firing up which is creating content for this button(big button) + creating another button in it ( we can call it 'small button')

//...code...//
var text = (elem.innerHTML = accordionHeader[i] + 
'<span style="float:right;font-weight:bold;"><a href="?edit='+id[i]+'">
 <button class="btn btn-default">edit</button></a> '+(i+1)+'</span>') || "";

In output this is something like:

<button class="big-button">
  <b>header</b>content

    <span style="float:right">
      <a href="?edit=5"> 
        <button id="small-button">edit</button>
      </a>
    </span>

</button>

The problem is (in firefox) that i cannot click on the small-button- the 'click' is always on this big one. It's like the big-button is in front of the small-button. I tried z-index but it's not helping at all. In Chrome this problem doesn't occur.