如何強制<button>標籤顯示：inline？

現在，他們看起來當你不徘徊在他們很好，但是當你將鼠標懸停在<button>和<input>元素，你會看到它們下面的文字是碰到一點，而徘徊在<a>元素不會導致相同的效果。這是因爲<button>和<input>元素仍然顯示爲inline-block（儘管應用了display: inline !important;行，但仍處理邊界，填充和邊距的方式與常規inline不同）。

反正有重寫嗎？我知道這可以通過像背景一樣的黑色邊框來實現，但我真的很想知道是否有辦法使它們正確地變成display: inline。

注意：這裏的問題不在於文字被碰撞（儘管這是它的一個影響），也就是說，儘管一切都表明，瀏覽器仍然強制按鈕顯示爲inline-block。感謝大家提供了防止文字碰撞的方法，但這不是真正的問題。

謝謝！

來源

2013-08-17 CourtDemone

默認情況下，這些元素*已經*內聯，因此在CSS中聲明'display：inline'實際上不會改變任何內容。至於他們爲什麼表現出他們對邊界的態度......我不知道。 – BoltClock

感謝您的迴應，但至少在FF和Chrome中，這些元素不是內嵌的，它們被放置爲內聯塊。其中一個區別是它們處理邊界的方式不同，正如您可以在按鈕元素和「元素」之間的區別中看到的那樣。 – CourtDemone

看來你的問題有點誤導。實際上，您的按鈕標籤IS設置爲在常規狀態和懸停狀態下都顯示：內嵌。這聽起來像是你的問題是如何防止下面的文字在翻滾時被碰撞。不是像當前那樣使用底部邊框，爲什麼不在懸停狀態下使用以下內容來實現下劃線？

text-decoration:underline;

來源

2013-08-17 19:57:06 Andrew

上面做出了同樣的評論，但爲了清晰起見，我會在此再次發帖。感謝您的迴應，但至少在FF和Chrome中，這些元素不是內嵌的，它們被放置爲內聯塊。這些差異之一是它們處理邊框的方式，正如您在懸停按鈕元素和演示中的元素之間的區別所見。我不想使用下劃線，因爲這不是我想要達到的效果。 – CourtDemone

同意前面的答案，但是如果你想有一個邊界的靈活性，能夠使用填充來調整它規定等，你可以使用

border:1px solid transparent;

不像使用作爲哈克與您的顏色相同，因爲它與背景的顏色無關。

來源

2013-08-17 20:03:54 Nickfmc

這仍然是我不想找的方式。如果我可以將'

不確定爲什麼你的標記存在這樣的上下文，但問題看起來像是由設置font-family觸發的。如果您看一下這支筆 - http://codepen.io/pnts/pen/Egwuo - 懸停工作正常，但沒有指定字體系列，但是如果取消註釋指定一個字符的行，跳轉就開始了。

來源

2013-08-19 02:15:32 pnts

+10分創意，但這是因爲兩種不同字體之間的線高差異。如果你在這些按鈕上打開檢查器，你會發現它們仍然顯示爲「內嵌塊」。 – CourtDemone

如何強制<button>標籤顯示：inline？

回答

相關問題