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; }

有谁知道我做错了什么？我刚刚意识到的一件事可能是相关的 - 如果我使用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 个答案: