webkit 浏览器替换按钮

发布于 2024-12-03 13:35:02 字数 1395 浏览 0 评论 0原文

所以我有一个 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.

enter image description here

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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

飘然心甜 2024-12-10 13:35:02

vertical-align: top 添加到 #refine_search_button

默认的vertical-align值为baseline,添加具有不同font-sizespan可以调整基线的位置是。

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

Add vertical-align: top to #refine_search_button.

The default vertical-align value is baseline, and adding the span with different font-size adjusts where the baseline is.

If you would also like to vertically center the "Index Results" text, add line-height: 36px to the containing span.

假情假意假温柔 2024-12-10 13:35:02
#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;
}
浅唱々樱花落 2024-12-10 13:35:02

只需将 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.

我是有多爱你 2024-12-10 13:35:02

因为您使用 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)

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文