webkit浏览器替换按钮答案

【问题标题】：webkit browsers displacing buttonwebkit浏览器替换按钮
【发布时间】：2011-09-27 09:56:54
【问题描述】：

所以我有一个 36 像素高的 div，其中包含一个表单 (#refine_search)。该表单仅包含一个 35 像素高的按钮 (#refine_search_button)。一切都很好，直到我在字体大小超过 17 像素的表单后添加一个跨度。此时按钮将显示在 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 高的容器中取代前面的按钮？

【问题讨论】：

标签： css webkit

【解决方案1】：

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

默认的vertical-align 值为baseline，添加span 和不同的font-size 可以调整基线的位置。

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

只需将line-height:36px 添加到您的#refine_search_button id 即可解决问题。

【讨论】：

【解决方案4】：

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

它甚至可以使用 display:inline-block;

与使用 line-height 等来解决动态问题相比，IMO 更好地进行通用编码（即您更改字体大小等）

【讨论】：