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: top
to#refine_search_button
.The default
vertical-align
value isbaseline
, and adding thespan
with differentfont-size
adjusts where the baseline is.If you would also like to vertically center the "Index Results" text, add
line-height: 36px
to the containingspan
.只需将
line-height:36px
添加到您的 #refine_search_button id 即可解决问题。Just add a
line-height:36px
to 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)