webkit浏览器替换按钮

Question

所以我有一个36px高的div，其中有一个表单（#refine_search）。表单只包含35px高的按钮（#refine_search_button）。一切都很好，直到我在一个字体大小超过17px的表单之后添加一个span。此时，按钮将显示距离div顶部2或3个像素。

你可以在这里看到它： http://nolasatellitegovernment.tulane.edu/search.php

CSS：

 #bluenav {
    width:1124px;
    height:36px;
    position:relative;
    background:url(/g/internal_page_blue_nav_bg.jpg) repeat-x #afdeff;
 }

  #refine_search {
      display:inline;
      padding:0 0 0 110px;  
      margin:0;
    }

    #refine_search_button {
      width:92px;
      height:35px;
      background:url(/g/refine_search_button.jpg) no-repeat;
      border:0;
      padding:0;
      margin:0;
    }

    #refine_search_button:hover {
      background:url(/g/refine_search_button_over.jpg) no-repeat;
    }

    .big_heading {
      font-size:22px;
      font-weight:bold;
    }

代码看起来像

<div id="bluenav"><form action="refine_search.php" id="refine_search"><input type="submit" id="refine_search_button" name="submit" value="" /></form><span style="padding:0 10px 0 20px; font-size:22px">
</div>

有谁知道为什么18px文本会替换35px高容器中的前一个按钮？

Answer 1

将vertical-align: top添加到#refine_search_button。

默认vertical-align值为baseline，添加span并使用不同的font-size调整基准所在位置。

如果您还希望垂直居中“索引结果”文字，请将line-height: 36px添加到包含span。

Answer 2

只需在您的#refine_search_button ID中添加line-height:36px即可解决问题。

Answer 3

因为你使用display：inline它们相互依赖，比如同一行上的图像和文本。而是尝试使用display：block;向左飘浮;在这两个元素上，它们将始终浮动到顶部：）

甚至可以使用display：inline-block;

IMO比使用行高等更好地编码更好的编码来修复动态问题（即你改变字体大小等等）

Answer 4

#refine_search {
  display:block;
  float: left;
  padding:0 0 0 110px;  
  margin:0;
}