沒有文字的按鈕元素導致後續按鈕被定位錯誤

我在試圖設計一個沒有文字的按鈕樣式時遇到了一個有趣的HTML按鈕標籤行爲，只有一個字體圖標 - 沒有文字的按鈕會導致所有後續按鈕確實有文字被推下。該問題僅在按鈕具有指定的height屬性時纔會顯示。沒有文字的按鈕元素導致後續按鈕被定位錯誤

JSFiddle

<header> 
    <button><!-- No text here --></button> 
    <button>This button is pushed down</button> 
</header> 

button { height: 40px; }

起初我很肯定這是由於第一按鈕做了一些奇怪的基線魔法裏面的字體圖標，但你可以從最小的工作示例，行爲看在按鈕內沒有內容的情況下保持。

我可以通過向第一個按鈕添加內容來解決這個問題，但是因爲我唯一的內容是一個<span class="icon user"></span>，它是一個字體圖標，它實際上會干擾字體基線，並將按鈕僅定位幾個像素。這就是爲什麼我決定將圖標定位在絕對內部，這固定了原先的輕微定位問題，但是引入了這個新的圖標，因爲按鈕現在就像是空的一樣。

所以，問題仍然存在 - 我如何避免使用空按鈕定位問題？

注意：似乎上述只發生在webkit瀏覽器; Firefox使用正確的文本定位按鈕，但將空的按鈕向上推。

來源

2014-02-08 Elise

這是因爲button是一個inline元素，默認情況下它與基線對齊。

從W3C：

對齊框的基線與父框的基線。如果該框沒有基線，請將底部邊緣邊緣與母公司的基線對齊。

中序正確地調整它們，使用vertical-align: top;（或者middle，bottom數值）

button { 
    height: 40px; 
    margin-left: 5px; 
    vertical-align: top; 
}

Demo

在另一方面，你也可以使用零寬度空間實體 - Demo

此行爲與inline和inline-block共同要素，如果你想避免上面的一切，你可以在這裏使用float，比你將不需要0財產float將迫使button是內嵌以及塊級

Demo（使用float: left;）

注意：如果您正在使用float去，只要確保您清除他們，如果你不知道什麼clear手段，不是指我的答案 here將詳細解釋。

來源

2014-02-08 12:00:06

謝謝，這兩種解決方案都適合我！有沒有什麼理由比較喜歡一個呢？ – Elise

@Elise如果你選擇第二種解決方案，你將不得不在HTML文檔中添加實體，如果你更喜歡CSS，我會建議你使用'vertical-align：bottom;'而不是.. :)，你也歡迎。 –

將文本添加到按鈕並從屏幕上縮進文本。這將解決您的問題，並幫助您的搜索引擎優化，因爲機器人索引您的網站可以註冊文本，但不是圖像的內容。

button{ 
    width:; 
    height:; 
    display:block; 
    text-indent:-9999px; 
}

來源

2014-02-08 12:11:57 otherDewi

謝謝，我在屏幕閱讀器的按鈕裏面有文字，但是我使用[這裏]的技巧（http://zerosixthree.se/8-sass-mixins-you-must-have-in-your-工具箱/）（見第8項）隱藏它，這導致文本不佔用任何實際空間。 – Elise

您突出顯示的提示使用絕對定位，將流出的元素從容器中取出，因此容器崩潰。嘗試使用文本縮進代替。 – otherDewi

沒有文字的按鈕元素導致後續按鈕被定位錯誤

回答

相關問題