webkit 浏览器替换按钮
所以我有一个 36px 高的 div，里面有一个表单 (#refine_search)。该表单仅包含一个 35 像素高的按钮 (#refine_search_button)。一切都很顺利，直到我在表单后面添加了一个字体大小超过 17px 的跨度。此时按钮将显示在距离 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 高容器中前面的按钮？
So I have a 36px tall div with a form (#refine_search) in it. The form only contains a 35px tall button (#refine_search_button). All is well until I add a span after the form with a font-size over 17px. At that point the button will be displayed 2 or 3 pixels down from the top of the div.
You can see it in action here:
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;
}
And the code looks like
<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>
Does anyone know why 18px text would displace the preceding button in a 35px tall container?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
将
vertical-align: top添加到#refine_search_button。默认的
vertical-align值为baseline，添加具有不同font-size的span可以调整基线的位置是。如果您还想将“索引结果”文本垂直居中，请将
line-height: 36px添加到包含的span中。Add
vertical-align: topto#refine_search_button.The default
vertical-alignvalue isbaseline, and adding thespanwith differentfont-sizeadjusts where the baseline is.If you would also like to vertically center the "Index Results" text, add
line-height: 36pxto the containingspan.只需将
line-height:36px添加到您的 #refine_search_button id 即可解决问题。Just add a
line-height:36pxto your #refine_search_button id and that should fix the problem.因为您使用 display:inline 它们相互依赖，就像同一行上的图像和文本一样。相反，尝试使用 display:block;浮动：左；在这两个元素上，那么它们将始终浮动到顶部:)
它甚至可以与 display:inline-block; 一起使用
IMO最好做一般更好的编码，而不是使用行高等来解决动态问题（即，你改变字体大小等）
Because you use display:inline they are dependent on each other, like images and text on the same line. Instead try using display:block; float:left; on both elements, then they will always float to the top :)
It might even work with display:inline-block;
IMO its better do generel better coding than using line-height etc to fix a dynamic problem (ie. you change font-size and so on)