在 FF 中按下按钮中的文本答案

【问题标题】：Text in button pushed down in FF在 FF 中按下按钮中的文本
【发布时间】：2012-08-20 21:11:13
【问题描述】：

http://www.myprivacyaudit.com/ 上的“检查”按钮有问题。在 Firefox 中，它被下推并部分隐藏。你们中有人知道这是为什么吗？我已经花了几个小时，但找不到解决方案。顺便提一句。我正在使用 twitter-bootstrap

HTML：

<div class="row">
  <div class="span6 offset3">
    <div id="enter-username">
      <div id="tweet_form">
        <form accept-charset="UTF-8" action="/confirm" class="form" method="post">
          <span class="at">@</span> <input class="" id="twitter_account" name="twitter_account" type="text" />
          <br/>
          <input id="twitter_account_submit" name="commit" type="submit" value="Check" />
        </form>
      </div>
    </div>
  </div>
</div>

CSS：

  input#twitter_account_submit {
    border: 5px solid black;
    background-color: #ff5255;
    font-family: 'Anton', sans-serif;
    font-size: 30px;
    height: 40px;
    margin-left: 50px;
  }

【问题讨论】：

你能把有问题的代码放在这里吗？

标签： css forms firefox button twitter-bootstrap

【解决方案1】：

尝试改变这一点：

<input id="twitter_account_submit" name="commit" type="submit" value="Check">

到这里：

<button id="twitter_account_submit" name="commit" type="submit">Check</button>

在你的 CSS 文件中，改变这个：

input#twitter_account_submit

到这里：

#twitter_account_submit

【讨论】：

太棒了，成功了，非常感谢。你怎么知道那是原因？

【解决方案2】：

检查按钮是一个内联元素。您已在其上声明了 40px 的高度，但您无法控制内联元素的高度。

此外，在您的样式表的前面，您声明了一个 18px 的行高，该行高正在向下传输到按钮。

完全删除您的高度声明并应用 line-height（尝试 line-height:120%），这对我有用。

【讨论】：

INPUT、BUTTON 和 SELECT 元素不是内联元素，尽管不同浏览器呈现它们的方式存在一些差异，从而导致了这种假设。较新的浏览器倾向于在其基本 CSS 中应用display: inline-block;，这允许修改高度。较旧的浏览器确实倾向于将元素视为display: inline;，但在那些浏览器（我认为是 IE6/7）中，使用line-height 设置高度并不可靠。