文本在提交按钮中的位置

Question

文本在提交按钮中的位置

Eli*_*rey 16 html css

我的博客上的搜索提交按钮上的文本位置在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>

Run Code Online (Sandbox Code Playgroud)

相关的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;
}

Run Code Online (Sandbox Code Playgroud)

rfhb-lpmg只是我制作的一个自定义字体,它实现了U + 2767旋转花心心和U + 1F50E右指向放大镜,带有简单的字形.

Answer 1

Nic*_*ole 37

我推断出主要的麻烦是line-height财产.

两种浏览器都试图垂直居中按钮上的所有文本.在与组合height属性,但是,如果没有足够的空间来呈现完整的标准行高(字形填充显得相当大的大字体大小),这两个浏览器将针字形到按钮的顶部,修剪底部.

通常情况下,这line-height会有助于调整此功能,而在Chrome中,在您的示例中,这是成功的.但是,在button和input type="submit"元素的情况下,Firefox 完全忽略行高,因此不能以这种方式使用它来"修复"字符的位置.使用下面的极端示例,我们可以看到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>

Run Code Online (Sandbox Code Playgroud)

Firefox: Chrome:

当一个按钮元素留给本机样式(删除border)时,line-height两个浏览器都会忽略(奇怪的是,Chrome也忽略了高度,但Firefox没有).只要按钮是自定义样式,Chrome就会选择,line-height但Firefox不会.

所以,你可以做什么？

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

首先,确保您的字体以相同的垂直对齐方式呈现字形,标准字体显示基本的全高字符,例如H.(看起来你已经完成了大部分工作,因为你的页面看起来比问题中的截图要好得多.)
其次,你会注意到如果你使用像Arial这样的字体,并显示一个H(在相同的字体大小),它也是低的.这是因为字体的内置标准行高为角色提供了相当多的空间.这表示如果您可以编辑字体以修剪它,您可能会取得一些成功,从而为角色提供足够的空间,以便浏览器不会在底部修剪.
可能不太理想,但仍然是一个选项,您可以使用其他元素,或者与元素组合或代替button/submit元素,以使角色到位.

替代选择

我不确定你使用CSS字体的目标是什么,但通常是用于某种形式的渐进增强/优雅降级.在这种情况下,虽然(如你在评论中所说)特殊字符是标准化的Unicode"右指向放大镜",但如果它不呈现,它对用户仍然没有任何意义.

鉴于优雅降级的好处是允许更简单的技术显示您的网站而不会出现损坏,使用此字符似乎是可疑的 - 如果没有CSS字体或具有此字符的本机字体,它将呈现为?a ?,或者只是空白框.

考虑到这个问题,优雅降级的更好选择是简单地使用背景图像.制作"搜索"按钮的文本,隐藏文本(通过CSS),然后应用背景图像,然后实际优雅降级,以及更好的浏览器的奇特角色.

背景图像也可以(显然取决于文件本身)具有其他好处,例如更快的加载和渲染时间(例如,如果开发人员想要使用全字符集字体中的单个字符).

Answer 2

eas*_*wee 7

FF4在输入元素上设置自己的样式.如果将其粘贴到URL字段中,则可以检查所有这些内容:

resource://gre-resources/forms.css

Run Code Online (Sandbox Code Playgroud)

或者,如果您使用Firebug instaled检查从样式选项卡下拉列表中显示用户代理CSS,则可以看到此样式.

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

归档时间：	14 年，5 月前
查看次数：	34866 次
最近记录：	12 年，6 月前