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

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

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

    在IE 8中,我得到了:

    IE8 http://i50.tinypic.com/eof9z_th.jpg

    在Chrome4.0中,我得到了:

    Chrome http://i46.tinypic.com/xnzomc_th.jpg

    在火狐3.6中,我得到了:

    Firefox 3.6 http://i50.tinypic.com/1jvqz4_th.jpg

    有人知道我做错了什么吗?有一件事我刚刚意识到可能是相关的-如果我使用 a 而不是 button 它工作得很好。

    2 回复  |  直到 16 年前
        1
  •  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。不过看起来像是对齐。