css - (100% - 修正済み) div では機能するが、ボタンでは機能しない (Firefox と Opera の問題)

Question

私は 2 つのボタンを作成しようとしています。1 つは液体幅で、もう 1 つは固定幅です。また、メソッドposition: absoluteは div では正常に機能しますが、ボタンでは機能しません。

<menu class="sub">
    <button class="main">New</button>
    <button class="sub">+</button>
</menu>
<menu class="sub">
    <div class="main">New</div>
    <div class="sub">+</div>
</menu>

menu.sub {
  height: 30px;
  position: relative;
}
menu.sub * {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: none;
  background-color: red;
  color: #fff;
  text-align: center;
}
menu.sub .main {
  right: 25px;
  width: auto;
}
menu.sub .sub {
  width: 25px;
  left: auto;
}

div とボタンは、Chrome と IE では同じように見えますが (幅についてのみ話しています)、Firefox と Opera では最初のボタンが最小幅です。コードの何が問題になっていますか?

jsフィドル