堆棧內存溢出
  簡體   English   中英

文本在提交按鈕中的位置

[英]Position of text in a submit button

 原文  2011-04-08 18:32:29  0   11    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>

相關的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右指向放大鏡，帶有簡單的字形。

11 個解決方案

解決方案1
 37 已采納  2011-04-12 01:54:48

我推斷出主要的麻煩是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>

Firefox ： 火狐 Chrome ： 鉻

當按鈕元素保留為原生樣式（刪除border ）時，兩個瀏覽器都會忽略line-height （奇怪的是，Chrome也忽略了高度，但Firefox沒有）。 只要按鈕是自定義樣式，Chrome就會選擇line-height但Firefox不會。

所以，你可以做什么？

如果你還想使用CSS字體......

  1. 首先，確保您的字體以相同的垂直對齊方式呈現字形，標准字體顯示基本的全高字符，如H （看起來你大部分都是這樣做的，因為你的頁面看起來比問題中的截圖要好得多。）
  2. 其次，你會注意到如果你使用像Arial這樣的字體，並顯示一個H（在相同的字體大小），它也是低的。 這是因為字體的內置標准行高為角色提供了相當多的空間。 這表示如果您可以編輯字體以修剪它，您可能會取得一些成功，從而為角色提供足夠的空間，以便瀏覽器不會在底部修剪。
  3. 可能不太理想，但仍然是一個選項，您可以使用其他元素，或者與button/submit元素組合或代替button/submit元素，以使角色到位。

替代選擇

我不確定你使用CSS字體的目標是什么，但通常是用於某種形式的漸進增強/優雅降級 。 在這種情況下，雖然（正如你在評論中所說）特殊字符是標准化的Unicode“右指向放大鏡”，但如果它不呈現 ，它對用戶仍然沒有任何意義。

鑒於優雅降級的好處是允許更簡單的技術顯示您的網站而不會出現損壞，使用此字符似乎是可疑的 - 如果沒有CSS字體或具有此字符的本機字體，它將呈現為🔍 ? ，或只是一個空白框。

考慮到這個問題，優雅降級的更好選擇是簡單地使用背景圖像 。 制作“搜索”按鈕的文本，隱藏文本（通過CSS），然后應用背景圖像，然后實際優雅降級，以及更好的瀏覽器的奇特角色。

背景圖像也可以（顯然取決於文件本身）具有其他好處，例如更快的加載和渲染時間（例如，如果開發人員想要使用全字符集字體中的單個字符）。

解決方案2
 7  2011-04-12 08:38:25

FF4在輸入元素上設置自己的樣式。 如果將其粘貼到URL字段中，則可以檢查所有這些內容： 

resource://gre-resources/forms.css

或者，如果您使用Firebug instaled檢查從樣式選項卡下拉列表中顯示用戶代理CSS，則可以看到此樣式。

在此處檢查解決方案： 如何在Firefox 4 +中重置默認按鈕樣式

解決方案3
 3  2011-04-12 02:05:19

我得出了與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;
}

解決方案4
 2  2011-05-20 07:57:41

在按鈕內部使用CSS時，我遇到了類似的問題。 在Firefox中，文本偏移了1個像素，其余的瀏覽器也沒問題。 我使用了特定於Firefox的“填充”屬性，方法如下

原始代碼，其中輸入按鈕的文本在Firefox中低一個像素 

.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; }
}

在你的情況下，你可能需要更多的填充底部，並且可能填充頂部也是負的（-1px或-2px）。

解決方案5
 2  2012-03-16 20:08:19

當我在尋找這個問題的解決方案時，我遇到了這個問題，但是因為我從來沒有真正找到任何改變填充底部的提示，我想分享一下，我發現調整padding-bottom只是為了firefox工作得很好。

每個其他瀏覽器都允許足夠的行高控制來調整文本定位。 

/* 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;
    }
}

解決方案6
 1  2013-02-26 12:32:11

我碰到了同樣的事情。 我能夠解決我的問題，從底部推送填充（！） 

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恤尺寸'導致不同的背景偏移和其他地方的寬度）

解決方案7
 1  2011-04-09 02:44:22

本周早些時候我發生了這樣的事情 - 我發現你必須將某些ccs元素應用於'parent'元素而不是'child'。 所以基本上在.searchform div中嘗試一些像vertical-align的css。

同時，我在smartemini.com上遇到了我的搜索圖標問題。 它適用於除了ie9之外的aaaaallllll瀏覽器。 :(

解決方案8
 0  2011-04-12 02:31:39

您在這里看到的是當空間緊張時，瀏覽器在按鈕元素內呈現文本的方式有多么不同。 Chrome將測試垂直放置，而Firefox頂部對齊。

最重要的是，你使用的是自制字體，在垂直高度/前導/等方面可能會有一些潛在的問題。

我注意到，當我在input的value添加任何其他字符時 - 放大鏡在Firefox中進一步下降。 這表明以某種方式調整字體（如垂直位置，或裁剪掉頂部/底部白色空間）可能會有所幫助。

如果失敗了，你應該將<input type="submit"/>更改為<button type="search" title="Tooltip">Label</button>元素，看看button樣式是否比造型更容易input 。

如果問題仍然存在，您需要切換策略並將按鈕包裝在<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 */
}

（順便說一句，你可以選擇在<span/>內部包裝button文本並對其進行類似的負邊距修復，盡管我懷疑使用div內的button可以更容易地獲得垂直居中。）

也就是說，你真的應該使用一個好的老式背景圖像替換 - 它將更快地渲染和加載。 :-)

祝好運！

解決方案9
 0  2011-04-13 11:22:25

此問題僅發生在啟用了DirectWrite渲染模式的Firefox 4 / Win7上（默認情況下已啟用）。 Firefor4 GDI渲染模式正常工作。

它可能由vertical-align屬性引起，是基線 。 但U1F50D的基線不在最低點。 也許您應該嘗試將字體點移動一點，將最低點的y點設置為0。

解決方案10
 0  2011-04-13 18:46:53

這里有很多東西......我認為這是最簡單的方法： 

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

希望這有助於= D.

解決方案11
 0  2012-01-24 04:50:35

我發現填充和線高的組合可以解決這個問題。 如上所述，Firefox忽略了行高。

  1. 確保設置比頂部填充更大的底部填充。 稍微調整一下，你就可以在Firefox中垂直對齊文本了。
  2. 然后，您將看到這將文本推得太靠近Webkit中元素的頂部。 現在使用較大的行高在Webkit中正確對齊它們！

我在運行Firefox 7，Chrome 16，Safari 5.1和IE9的Windows 7計算機上進行了測試。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 將輸入文本表單放置在圖像上並提交按鈕 如何定位提交按鈕？ Zend提交按鈕位置 Position header 中的提交按鈕 如何放置提交按鈕，HTML 在div內放置一個提交按鈕 用文本替換提交按鈕？ 如何更改表單內提交按鈕的 position？ 如何設置提交按鈕的文本樣式 提交按鈕以填充頁面上的文本
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM