html - 在Firefox中未正确放置按钮内的图像

我有以下标记：

<p class="managebox">
  <button value="Add page">
    <img src="page_add.png" alt="Add more content" />
    Add Page
  </button>
</p>

以及以下CSS：

p.managebox { position: relative; }
p.managebox button { display: block;
                     padding: 5px 7px 4px 30px;
                     position: relative; }
p.managebox button img { position: absolute; left: 7px; }

在IE 8中，我得到以下信息：

IE8 http://tinypic.com/images/404.gif

在Chrome 4.0中，我得到以下信息：

Chrome http://tinypic.com/images/404.gif

在Firefox 3.6中，我得到以下信息：

有人知道我在做什么错吗？我刚刚意识到的一件事可能是相关的-如果我使用a而不是button，它可以正常工作。

最佳答案

从来没有见过这个问题，但是对于那些特定的目的，我通常使用background-image。试试看。

更新：刚刚尝试了SSCCE。实际上，我不需要任何样式即可将其在所有浏览器中定位为相同。

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2397413</title>
    </head>
    <body>
        <button value="Add">
            <img src="http://upload.wikimedia.org/wikipedia/commons/b/b0/Calendar_add.png" width="16" height="16">
            Add
        </button>
    </body>
</html>