代码之家 › 专栏 › 技术社区 › Dominic Rodger

在Firefox中,按钮内的图像位置不正确

firefox css html

0

Dominic Rodger · 技术社区 · 16 年前

我有以下标记:

<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 它工作得很好。

2 回复 | 直到 16 年前

1

Dominic Rodger 16 年前

从来没有见过这个问题,但我通常用的是那些特定的脓包。 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>

2

0

Dustin Laine 16 年前

很难说,p.managebox按钮img似乎继承了一些CSS。使用firebug检查元素并查看正在应用的css。不过看起来像是对齐。

在Firefox中,按钮内的图像位置不正确

在IE 8中,我得到了:

在Chrome4.0中,我得到了:

在火狐3.6中,我得到了: