Position of text in a submit button

Question

Position of text in a submit button

htmlcss

18

我的博客上搜索提交按钮上的文本在Firefox 4中位置非常低，但在Chrome 10或IE9中则没有。我已经尝试了几乎所有的方法，除了降低文本字体大小之外，没有任何一种方法可以解决这个问题，但这并不是最佳方案，因为文本会变得太小。

截图

Windows 7上的Firefox 4：

Firefox 4 截图

Windows 7上的Google Chrome 10.0.648.204：

Google Chrome 截图

相关HTML代码：

<form method="get" class="searchform" action="http://eligrey.com/blog"> 
    <input type="search" placeholder="search" name="s" /> 
    <input type="submit" value="&#128269;" title="Search" /> 
</form>

相应的CSS规则（来自http://eligrey.com/blog/wp-content/themes/eligrey.com/style.css）：

.searchform input[type="submit"] {
    font-family: "rfhb-lpmg";
    color: #ccc;
    font-size: 3em;
    background-color: #959595;
    text-align: center;
    border: 1px solid #888;
    height: 34px;
    width: 42px;
    line-height: 34px;
    -webkit-border-bottom-right-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-topright: 4px;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-transition-property: border, background-color, box-shadow;
    -webkit-transition-duration: 0.2s;
    -moz-transition-property: border, background-color, box-shadow;
    -moz-transition-duration: 0.2s;
}

rfhb-lpmg 是我制作的一种自定义字体，它使用简单的字形实现了旋转的花式心形符号 U+2767 和右指向放大镜符号 U+1F50E。

- Eli Grey

你尝试过使用 vertical-align 属性吗？ - Karl Andrew

我已经尝试使用适当的表格值和vertical-align:middle，但它没有起作用。 - Eli Grey

有趣的是，我可以在OSX 10.6上的FF4中重现这个问题，但在我的Win 7机器上却不能。也许是因为我安装了gdipp...此外，字形方面的工作做得很好。我是网页字体图标的坚定支持者。 - peterjmag

不确定它是否有效。将其放入一个div中并对该div应用css。这在许多情况下都有效。 - coder

1

我相信这个问题有一个更优雅的解决方案。只是为了记录！ - Ennea

11个回答

7

FF4会在输入元素上设置自己的样式。如果您将以下内容粘贴到URL字段中，您可以检查所有这些样式：

resource://gre-resources/forms.css

如果您安装了Firebug，可以从Style选项卡下拉菜单中选择“显示用户代理CSS”来查看这些样式。

在此处检查解决方案：如何重置Firefox 4+中的默认按钮样式

- easwee

3

我得出了与Renesis相同的结论，尽管我不确定Firefox是否没有遵守行高或垂直对齐的规定。以下是另一种解决方案的概述，允许您继续使用您的花哨字形。因为您在按钮中使用像素大小，所以请尝试类似于以下方式（简化HTML）。这可能有些过度，而背景图片几乎肯定更合适，但无论如何。

简化后的HTML：

<div class="searchform">
  <input type="search" placeholder="search" name="s"  />
  <span><input type="submit" value="&#128269;" title="Search" /></span>
</div>

还有简化后的CSS：

// hide the border and background for the submit button
.searchform input[type="submit"] {
  border: none;
  background: transparent;
}
// give the span the properties that the submit button has now
span {
  position: relative;
  width: 30px; // or whatever
  height: 30px; // or whatever
}
// absolutely position the submit button
.searchform input[type="submit"] {
  position: absolute;
  margin-top: -15px; // half the span height
  margin-left: -15px; // half the span width
  top: 50%;
  left: 50%;
  bottom: 0;
  right: 0;
}

- theazureshadow

2

当我正在寻找此问题的解决方案时，我偶然发现了这个方法。虽然我一直在寻找其他的解决方案，但最终只改变火狐浏览器中的padding-bottom值就可以很好地解决问题。

其他浏览器都允许通过控制行高来调整文本位置。

/* This gets picked up in firefox only to adjust the text into the middle */
@-moz-document url-prefix() {
    input[type="button"],
    input[type="submit"],
    button.btn {
        padding-bottom: 6px;
    }
}

- Iwnnay

2

在使用CSS设计按钮时，我遇到了类似的问题。在Firefox浏览器中，文本会偏移1像素，而其他浏览器则没有这个问题。我使用了针对Firefox特定的"padding"属性，代码如下：

原始代码中，在Firefox浏览器中输入按钮的文本会低1像素

.mybutton { 
    height:32px; background-color:green; 
    font-size:14px; color:white; font-weight:bold; 
    border:0px; -moz-border-radius:16px; border-radius:16px;
}

在添加了上述CSS后，再加上针对Firefox的特定填充，它在Firefox中表现完美。

@-moz-document url-prefix() {
    .mybutton { padding-bottom:1px; }
}

在您的情况下，可能需要更多的padding-bottom，并且可能还需要负的padding-top（-1px或-2px）。

- Vivek Kapoor

1

我之前也遇到过类似的问题 - 我发现必须将某些ccs元素应用到“父”元素而不是“子”元素。所以基本上在.searchform div中尝试一些css，比如vertical-align。

同时，我在smartemini.com的搜索图标上遇到麻烦。它在aaaaallllll浏览器中都可以工作，除了ie9. :(

- Rebecca

这并没有帮助，因为需要重新定位的是提交按钮内部的文本，而不是提交按钮本身。 - Eli Grey

1

我遇到了相同的问题。我通过向下推动填充（！）来解决我的问题。

padding: 0 0 2px 0; /* total height: 36px */
height: 34px;

或者说，如果您喜欢使用一致的输入['..']和锚定按钮，则可以针对后者使用不同的覆盖调整以获得完全控制。

/* general button styling for input and anchor buttons */
.buttonXS, .buttonS, .buttonM, .buttonL  {
    display: block;
    font-size: 14px;
    line-height: 14px; /* just a precaution, likely ignored in FF */

    padding: 0 0 2px 0; /* total height: 36px */
    height: 34px;   
    ...
}

/* distinct vertical align for anchor buttons */
a.buttonXS, a.buttonS, a.buttonM, a.buttonL  {
    padding: 12px 0 0 0; /* total height: 36px */
    height: 24px;
}

（“T恤尺码”在其他地方导致不同的背景偏移和宽度）

- Frank N

0

你所看到的是当空间紧张时，不同浏览器如何呈现按钮元素内部文本的不同方式。Chrome将文本垂直居中，而Firefox则将其顶部对齐。

此外，你正在使用自制字体，可能存在一些与垂直高度/行距等有关的潜在问题。

我注意到，当我向的添加任何其他字符时，在Firefox中放大镜会进一步下降。这表明某种程度上调整字体（如垂直位置或裁剪掉顶部/底部的空白）可能会有所帮助。

如果这样做失败了，你应该将<input type="submit"/>更改为<button type="search" title="Tooltip">Label</button>元素，并查看是否比样式化更容易。

如果问题仍然存在，你需要改变策略，将你的按钮包装在一个<div class="btnwrap" />中。

.searchform .btnwrap {
  display: inline-block;
  overflow: hidden;
  height: 32px;
  border: 1px solid #888;
  /* plus the border-radius styles */
}
.searchform button {
  /* all the original button styles, except the border */
  height: 50px;
  margin: -9px 0; /* (32-50)/2 = -9 */
}

（顺便说一下，您可以选择将button文本内部包装在<span/>中，并进行类似的负边距hack，尽管我怀疑使用div将button垂直居中更容易。）

话虽如此，您真的应该使用老式的背景图像替换 - 它既可以呈现又可以更快地加载。 :-)

祝你好运！

- Már Örlygsson

使用 button 而不是 input 并不能解决问题，因为它似乎容易受到同样的文本位置问题的影响。 - Nicole

是的。修复字体似乎是解决这个有趣小问题的关键。当然，使用背景图像是最快/最简单的方法，但我觉得Ely知道这一点，只是想尝试这种方法作为实验。 - Már Örlygsson

0

这里有很多答案...我认为这是做这件事最简单的方法：

.searchform input[type="submit"]
{
    height: 35px;
    line-height: 35px;
    font-size: 2em;
}

希望这可以帮到你 =D

- BentOnCoding

0

这个问题只在启用了默认的 DirectWrite 渲染模式的 Firefox 4/Win7 上出现。Firefor4 GDI 渲染模式正常工作。

这可能是由于 vertical-align 属性设置为 baseline 导致的。但 U1F50D 的基线不在最低点上。也许您应该尝试将字体点稍微向上移动，将最低点的 y 坐标设置为 0。

- Yi Zhao

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nicole · Accepted Answer

我推断主要问题在于 line-height 属性。

两个浏览器都试图垂直居中所有按钮文本。然而，结合 height 属性，如果没有足够的空间来呈现完整的标准行高（使用大字号时，字符填充会变得非常大），两个浏览器都会将字符固定在按钮顶部，从而修剪底部。

通常，line-height 可以帮助调整这个问题，在你的示例中，在 Chrome 中，这是成功的。然而，在 button 和 input type="submit" 元素的情况下，Firefox 完全忽略了 line-height，所以不能用这种方式来“修复”字符的定位。通过下面的极端示例，我们可以看到在 Chrome 中文本已经被推出了可见范围，而在 Firefox 中它仍然保持在（垂直）中心。

<!doctype html>

<html>
<body>
<style type="text/css">
input {
    border:1px solid black; 
    line-height:1000px;
    height:40px;
}
</style>
<input type="submit" value="Test"/>
</body>
</html>

Firefox: Firefox Chrome: Chrome

当一个按钮元素使用原生样式（移除border）时，两个浏览器都会忽略line-height属性（奇怪的是，Chrome还会忽略height，但Firefox不会）。一旦按钮被自定义样式后，Chrome就会接受line-height，但Firefox则不会。

那么你该怎么做呢？

如果你仍想使用CSS字体...

首先，确保你的字体在垂直对齐方面与标准字体显示基本全高字符（例如H）相同。（因为你的页面看起来比问题中的截图要好得多，所以这似乎已经做到了。）
其次，你会注意到，如果你使用像Arial这样的字体，并显示一个H（在相同的字体大小下），它也很低。这是因为字体的内置标准行高给了它相当大的空间，位于字符上方。这表明，如果你可以编辑字体以修剪它，就可以为字符提供足够的空间，使浏览器不会在底部裁剪它。
也许对你来说不那么理想，但仍然是一个选项，你可以使用其他元素，要么与button/submit元素组合使用，要么代替该元素，将字符放到位。

备选方案

我不确定你使用CSS字体的目标是什么，但通常它是为了某种形式的渐进增强 / 优雅降级。在这种情况下，尽管（如你在评论中所说）特殊字符是标准化的Unicode“向右指向放大镜”，但如果它不能显示，它仍然对用户没有任何意义。

鉴于优雅降级的好处是允许更简单的技术显示您的网站而不会出现错误，因此使用此字符似乎是可疑的 - 如果没有CSS字体或具有此字符的本机字体，则它将呈现为🔍一个?，或者只是一个空框。

鉴于此问题，优雅降级的更好选择是简单地使用background-image。将按钮文本设置为“搜索”，通过CSS隐藏文本，并应用背景图像，然后您就拥有了实际的优雅降级和一个更好的浏览器专用的特殊字符。

背景图片可以（显然取决于文件本身）具有其他好处，例如更快的加载和呈现时间（例如，如果开发人员想要从完整字符集字体中使用单个字符）。