Question

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

Answer 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

Answer 2

检查按钮是内联元素。您已声明其高度为40像素，但无法控制内联元素的高度。

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

完全删除你的高度声明并应用行高（尝试行高：120％），这对我有用。

在FF中按下按钮中的文本

2 个答案: