文本在提交按钮中的位置 [英] Position of text in a submit button

问题描述

Firefox 4中的）：

  .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旋转

解决方案

我推断主要的麻烦是 line-height 属性。

两个浏览器都尝试垂直居中按钮上的所有文本。然而，与 height 属性相结合，如果没有足够的空间来渲染完整的标准行高（字体填充在大字体大小中增长很大），两个浏览器

通常情况下， line-height 会将字形固定到按钮的顶部，帮助调整此，在Chrome中，在您的示例中，这是成功的。但是，在按钮和 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 =submitvalue =Test/> 
< / body> 
< / html> 
  

Firefox ：
Chrome ：

当按钮元素留给原生样式时（删除 border code> line-height 被两个浏览器忽略（奇怪的是，Chrome也忽略了高度，但Firefox不会）。只要按钮是自定义样式，Chrome就会选择 line-height ，但Firefox不会。

---

那么你能做什么呢？

如果你还想使用CSS字体。 ..

1. 首先，确保您的字体以相同的垂直对齐方式呈现字形，高度字符，如 H 。
   注意如果你使用像Arial这样的字体，并显示H（相同的字体大小），它也很低。这是因为内置的标准行高的字体给了它相当多的空间上面的字符。这表示如果您可以修改字体以修剪此字体，可能会取得一些成功，从而使该字符在浏览器底部无法修剪。


2. 可能不太理想，但仍然是一个选项，您可以使用其他元素，结合或代替按钮/提交元素，以获得字符到位。

---

替代选项 >

我不确定你的目标是使用CSS字体，但通常它是一些形式的渐进增强/优雅退化。在这种情况下，虽然（正如你在评论中所说的）特殊字符是一个标准化的Unicode右侧放大镜，但是如果它不是渲染的话，它仍然没有任何意义。 em>

鉴于优雅降级的好处是允许更简单的技术来显示您的网站而不会出现损坏，使用这个字符似乎是可疑的。没有CSS字体或具有此字符的本地字体，它将渲染为

The position of the text on the search submit button on my blog is very low in Firefox 4, but not Chrome 10 or IE9. I've tried almost everything, and nothing works except lowering the font size of the text, which isn't an optimal solution as the text will be too small.

Screenshots

Firefox 4 on Windows 7:

Google Chrome 10.0.648.204 on Windows 7:

The relevant 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> 

The relevant CSS rule (from 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 is just a custom font I made which implements U+2767 rotated floral heart bullet and U+1F50E right-pointing magnifying glass with simplistic glyphs.

解决方案

I've deduced that the main trouble is the line-height property.

Both browsers attempt to vertically center all text on buttons. In combination with the height property, however, if there is not enough room to render the full standard line-height (glyph padding grows quite large with large font sizes), both browsers will pin the glyph to the top of the button, trimming the bottom.

Normally, the line-height would help adjust this, and in Chrome, in your example, this was successful. However, in the case of button and input type="submit" elements, Firefox ignores line-height altogether, so it can't be used in this way to "fix" the positioning of the character. Using the extreme example below, we can see that the text has been pushed out of visbility in Chrome, while it still stays right in the (vertical) center in 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: Chrome:

When a button element is left to the native style (remove the border), line-height is ignored by both browsers (weirdly, Chrome also ignores the height but Firefox does not). As soon as the button is custom-styled, Chrome picks up the line-height but Firefox does not.

---

So what can you do?

If you still want to make use of CSS fonts...

1. First of all, make sure your font renders the glyphs in the same vertical-alignment that a standard font displays a basic full-height character, like H. (It appears you've done this for the most part, since your page looks significantly better than the screenshots in the question.)
2. Second, you'll notice that if you use a font like Arial, and display an H (at the same font size), it's also low. This is because the built in standard line-height of the font gives it quite a bit of room above the character. This indicates that you may have some success if you can edit the font to trim this, thereby giving the character enough room to not be trimmed at the bottom by the browser.
3. Probably less ideal to you, but still an option, you can use other elements, either in combination with or in place of the button/submit element, to get the character into place.

---

Alternative option

I'm not sure what your goal is in using CSS fonts, but often it is for some form of progressive enhancement/graceful degradation. In this case, although (as you said in the comments) the special character is a standardized Unicode "right-pointing magnifying glass", it still will not have any meaning to the user if it doesn't render.

Given that the benefit of graceful degradation is to allow simpler technologies to display your website without appearing broken, the use of this character seems suspect — without CSS fonts or a native font with this character, it will render as 🔍 a ?, or simply a blank box.

A better option for graceful degradation, given this problem, would be to simply use a background-image. Make the text of the button "Search", hide the text (through CSS), and apply the background image, and then you have actual graceful degradation, and a fancy character for better browsers.

A background image could also (obviously dependent on the files themselves) have other benefits, such as faster load and render times (for instance, if a developer wanted to use a single character from a full-character-set font).

这篇关于文本在提交按钮中的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！