Firefox의 버튼 요소에서 텍스트 장식이 작동하지 않습니까?

Question

나는 다음과 같이 하나의 CSS 스타일 간단한 버튼이있어 :

<button style="text-decoration:underline">That's a button</button> 

방화범은 참으로 텍스트 장식 밑줄로 설정되어 계산 된 스타일 탭에 알려줍니다. 그러나 버튼 텍스트에는 밑줄이 그어지지 않습니다. 왜 안 되죠? 크롬과 IE 모두 버튼 텍스트에 밑줄을 긋기 때문에 분명히 Firefox (3.6)의 문제입니다. Firefox 용 CSS 해결 방법이 있습니까? 아니면 텍스트 장식 스타일로 바깥 쪽 div에 단추를 넣어야합니까?

Answer 1

조금 더 연구 온라인이 더 우아한 해결 방법을 생산하고있다, 그것은 아마도 '버그'나를 설득했다. 그것은 FireFox를위한 거의 'hasLayout'유형입니다 (실제로는 아니지만 비슷한 기능을합니다). 다음 중 하나를 추가하면 position: absolute, display: block, display: inline-block, float: left (또는 오른쪽) 밑줄이 표시됩니다. 따라서 :

<button style="text-decoration:underline; display: inline-block;">That's a button</button> 

Answer 2

'버그'(웹 표준이 button 요소에 대해 실제로 무엇을 말하고 있는지 알지 못하므로 '버그'또는 브라우저 해석의 차이 만 나타 내기를 망설이지 만). 이 일을하지만 div 래퍼 솔루션보다 정말 크게 다르지 않다 :

<button ><span style="text-decoration:underline">That's a button</span></button>