javascript - iOS Safari で、html ボタン要素を無効にするにはどうすればよいですか?

Question

私の iPad (iOS 7) は、要素に属性<button>があっても要素を無効にしないことを発見しました。disabled私のOS（Windows 7）で試した他のすべてのブラウザ（FF、Chrome、Safari）では無効になっています。

同じ html を取り、単に and を に置き換える<button>と、<input type="button">期待どおりに入力が無効になります。そのままにしておきたい理由<button>は、 を中に入れたいのですimgが、 ではうまくいかないようですinput。<button>では、iOS Safari で 無効にするにはどうすればよいでしょうか。この問題を再現できるjsfiddleは次のとおりです。

<div id="hero-1" class="hero">
    <button disabled="" class="go-to-hero">
        <div style="background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-oWvCrkzPjX9VBkJavc48RfBP1mSLPYMUIe8FpSaNzpgWWEL55A');background-position: -399px -42px;width: 13px;height: 15px">
        </div>
    </button>
</div>

<div id="hero-2" class="hero">
    <input type="button" disabled="" class="go-to-hero">
        <div style="background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-oWvCrkzPjX9VBkJavc48RfBP1mSLPYMUIe8FpSaNzpgWWEL55A');background-position: -399px -42px;width: 13px;height: 15px">
        </div>
    </input>
</div>

これを iPad で表示すると、最初のボタンが有効になり、2 番目のボタンが無効になります。両方無効にしてほしい。