CSS按钮和跨浏览器问题

Question

我有一个名为“button”的类，我想用它来作为按钮、输入和锚标签的样式。问题在于button和input标签的行高比anchor标签大。我在这里附上了一个示例，你可以在firebug或其他工具中进行调整。 http://28dev.com/stackoverflow/css-buttons.html 但是对于那些只想查看css/html的人，这里是代码：

  .button {
    font-family : helvetica, arial, sans-serif;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background   : url(/images/ui-bg_glass_75_e6e6e6_1x400.png) repeat-x scroll 50% 50% #E6E6E6;
    border-color : #636363 #888888 #888888 #636363;
    border-right : 1px solid #888888;
    border-style : solid;
    border-width : 1px;
    cursor       : pointer;
    display      : block;
    float        : left;
    font-size    : 12px;
    font-weight  : normal;
    line-height  : 100%;
    min-width    : 100px;
    padding      : 3px 12px;
    text-align   : center;
  }
  .button, .button a {
    color : #282828;
    text-decoration : none;
  }

  .button:hover, .button:hover a {
    border-color : #343434;
    color : #080808;
  }
  .marginR { margin-right : 5px; }


  <button class='button marginR' type='submit'>button.button</button>
  <input type="submit" value="input.button" class="button marginR" />
  <a class="button" href="">a.button</a>

更新的CSS： 这似乎可以解决大部分在Firefox、Chrome、IE7和Safari中出现的问题：

  .button {
      font-family  : helvetica, arial, sans-serif;
      color        : #282828;
      background   : url(/images/layouts/silver/buttons.png) repeat-x scroll 50% 50% #E6E6E6;
      border-color : #636363 #888888 #888888 #636363;
      border-right : 1px solid #888888;
      border-style : solid;
      border-width : 1px;
      cursor       : pointer;
      display      : block;
      float        : left;
      font-size    : 12px;
      font-weight  : normal;
      min-width    : 150px;
      padding      : 3px 0px;
      text-align   : center;
      margin-top   : 0px;
      line-height  : 15px;
      text-decoration : none;
      border-radius        : 3px;
      -webkit-border-radius: 3px;
      -moz-border-radius   : 3px;
  }
  /* Invalid CSS
     God love IE's inability to fix their bugs properly leaving us workarounds to their inept development.
     See http://www.webdevout.net/css-hacks
  */
  html* a.button { line-height : 18px; }

  .button:hover {
      background-image : url(/images/layouts/silver/button-hover.png);
      border-color : #343434;
      color : #080808;
  }
  .marginR { margin-right : 5px; }

- ynkr

---

只是为了表述一个问题，你是在问：“我该如何使按钮具有与锚标记相同的行高？”，还是其他什么？ - Joe Mastey

Answer 1

从我所看到的，我认为这并不是一个行高的问题。

a.button
{
    position: relative;
    top:      2px;
}

在Safari中将它们的顶部对齐。

- Azeem.Butt

---

啊，我在检查Safari之前停了下来。设置.button{margin-top:0;}也解决了这个问题。感谢您的帮助。 - ynkr

Answer 2

这就是浏览器中按钮的生成方式，它们是表单元素并具有不同的属性。我从未见过轻松解决这个问题的方法。我想你可以只需将不同的属性应用于锚点，直到它们看起来相同或接近为止。您会注意到，您的按钮也没有应用min-width属性（至少在Firefox中没有）。

此外，您的CSS：.button a {

这将适用于所有位于class为“button”的元素内部的锚点，但实际上不存在，也永远不应该存在（您不会将锚点放在按钮内）。

您还忘记了基本的“border-radius”属性，这实际上是唯一被CSS3批准的边框半径属性，并且是在IE中有效的唯一属性。

编辑：
以下是不同浏览器中发生的情况的简要概述。
IE：显示一切正常（哇，IE，真的吗？）。
Firefox：自动调整按钮的宽度，按钮更高。
Chrome：在按钮周围添加边距，按钮更高。

- animuson

---

FF将左/右填充添加到锚标记的总宽度上；而对于按钮/输入框则不是这样。通过将3px 12px更改为3px 0，所有元素现在都具有相同的宽度，并且FF似乎会遵循min-width值。我采纳了您的建议并将line-height应用于按钮，然后对IE7进行了修改，以使所有按钮的总高度相同。这不是一个很好的解决方案，因为我引入了无效的CSS，但无论如何。那个.button a {}只是我胡乱尝试的结果。感谢您指出这一点。快速浏览Chrome看起来还不错，所以我完成了。非常感谢您的帮助！ - ynkr