Css webkit浏览器替换按钮

所以我有一个36像素高的div，里面有一个表单搜索。表单仅包含一个35px高的按钮“优化搜索”按钮。一切都很好，直到我在表单后面添加了一个跨度，字体大小超过17px。此时，按钮将从div顶部向下显示2或3个像素

你可以在这里看到它的作用：

CSS:

代码看起来像

<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高容器中前面的按钮吗？

只需在“优化搜索”按钮id中添加一个行高：36px，就可以解决问题。

只需在“优化搜索”按钮id中添加一个行高：36px，就可以解决问题。

添加垂直对齐：顶部到顶部优化搜索按钮

默认的垂直对齐值为基线，添加不同字体大小的跨距将调整基线的位置

如果还希望将索引结果文本垂直居中，请在包含的范围中添加行高：36px

添加垂直对齐：顶部以优化搜索按钮

默认的垂直对齐值为基线，添加不同字体大小的跨距将调整基线的位置

如果还希望将索引结果文本垂直居中，请在包含的范围中添加行高：36px

---

因为使用display:inline，所以它们相互依赖，就像同一行上的图像和文本一样。相反，尝试使用display:block；浮动：左；在两个元素上，它们将始终浮动到顶部：

它甚至可以用于显示：内联块

---

在解决动态问题时，通常使用比使用行高等更好的编码，例如更改字体大小等等，因为使用display:inline它们相互依赖，就像同一行上的图像和文本一样。相反，尝试使用display:block；浮动：左；在两个元素上，它们将始终浮动到顶部：

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

它甚至可以用于显示：内联块

在我看来，比起使用行高等来解决动态问题，比如改变字体大小等，使用通用的更好的编码方式更好

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