Question

这可能是一个简单的修复，但我无法找到如何在PC上垂直对齐我的文本。

我正在使用这个我一直常用的文本：

input.input_search_bg {
  background: url("../images/input_search.png") no-repeat scroll 0 0 transparent;
  border: 0 none;
  color: #145D94;
  float: left;
  font-size: 13px;
    height: 26px;
  line-height: 26px;
  margin: 0 7px 0 0;
  padding: 0 8px 0 7px;
  width: 266px;
}

我的线条高度居中，而在Mac上看起来很棒。但是当我在PC上测试FF 3.0时，它并没有对齐。关于如何解决这个问题的任何想法？

该部分的HTML：

            <div class="top_search">
                <form>
                    <div class="search_box">
                        <input type="text" value="Search" class="tog input_search_bg" />
                    </div>
                    <input type="submit" class="search_submit_btn" />
                </form>
            </div>

Answer 1

可悲的是，Firefox（不知道所有版本）不允许在input元素上指定您自己的行高：http://www.cssnewbie.com/input-button-line-height-bug/

您必须使用font-size和/或padding。

Answer 2

给填充底部，

input.input_search_bg {
  background: url("../images/input_search.png") no-repeat scroll 0 0 transparent;
  border: 0 none;
  color: #145D94;
  float: left;
  font-size: 13px;
    height: 26px;
  line-height: 26px;
  margin: 0 7px 0 0;
  padding: 0 8px 4px 7px;
  width: 266px;
}

在Firefox中的输入内垂直对齐文本 - 仅限Windows

2 个答案: