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

Question

我有以下标记：

<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 ，则效果很好。

Answer 1

从来没有见过这个问题，但是对于那些特定的目的，我通常使用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>

Answer 2

很难说，p.managebox按钮img似乎继承了一些CSS。 使用FireBug检查元素并查看正在应用的CSS。 虽然看起来像对齐。

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

问题描述

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

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

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

2 个解决方案

解决方案1
1 已采纳 2010-03-07 18:41:27

解决方案2
0 2010-03-07 18:44:41

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

问题描述

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

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

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

2 个解决方案

解决方案1 1 已采纳 2010-03-07 18:41:27

解决方案2 0 2010-03-07 18:44:41

解决方案1
1 已采纳 2010-03-07 18:41:27

解决方案2
0 2010-03-07 18:44:41