Question

我有一个类'按钮'，我想用于按钮，输入和标签。问题是按钮和输入标签的线高都比锚标签高。我在这里附上了一个例子，所以你可以用萤火虫或其他任何东西来玩它。

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： 这似乎解决了FF，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; }

Answer 1

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

另外，您的CSS：.button a {

这将适用于具有类“按钮”的元素内的所有锚点，该类别不存在且不应存在（不要将锚点放在按钮内）。

您还忘记了基本的'border-radius'属性，它实际上是CSS3批准的唯一边界半径属性，并且是IE中唯一可用的属性。

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

Answer 2

从我所看到的情况来看，我认为这不是一个线高问题。

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

让我在Safari中对齐他们的上衣。

CSS按钮和跨浏览器问题

2 个答案: