html - CSS 按钮和跨浏览器问题

Question

我有一个“按钮”类，我想将其用于按钮、输入和标签。问题是按钮和输入标签的行高都比 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:这似乎解决了 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

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

此外，您的 CSS:.button a {

这将适用于具有“按钮”类的元素内的所有 anchor ，这些 anchor 不存在也不应该存在(您不要将 anchor 放在按钮内)。

您还忘记了基本的“border-radius”属性，它实际上是唯一 CSS3 认可的边框半径属性，也是唯一在 IE 中可用的属性。

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