2012-06-11 2 views
4

Mac에서 웹킷 브라우저 (Safari 및 Chrome, 현재 버전)를 사용하는 경우 input 요소의 높이를 설정할 수 없습니다.웹킷 브라우저에서 버튼 높이 (input-element)를 설정하는 방법은 무엇입니까?

<input type="button" style="height:200px;" value="Hello World!">​ 

은 작동하지 않습니다.

jQuerys $('input').css('height','200px');​ 중 하나가 작동하지 않습니다.

http://jsfiddle.net/XmS6m/

폭을 설정하는 것은 가능하지만, 어느 스타일 속성 또는 jQuery로.

이 불일치의 이유는 무엇입니까? 그리고 가능한 해결책은 무엇입니까?

+0

는, 높이가 적용됩니다합니다 (jsfiddle을 사용하여, 순수 CSS는 충분하다, 그래서 만약 jQuery 코드 만). 그래서 이것은 맥 전문일지도 모른다. (아마도 버튼을위한'-webkit-appearance'를위한 특별한 디폴트 값을 가지고있을 것이다.) 아니면 설치 관련 문제일지도 모른다. –

답변

12

디스플레이 인라인 블록은 아무것도하지 않는다, 입력이 이미 기본적으로 설정이 디스플레이가있다. border:none을 추가하십시오. 그렇게하면 원하는대로 행동하기 시작합니다. 여기에 바이올린입니다 ->http://jsfiddle.net/joplomacedo/XmS6m/1/

+2

또는 원하는 경계선을 추가하십시오. – banzomaikaka

+0

이것은 좋은 팁입니다. 감사합니다! 저는 CSS를 처음 접했고 잠시 동안이 문제에 대한 해결책을 찾고있었습니다. 국경은 무엇입니까 : 달성하지 못합니까? – HelloWorld

+0

아아! border : none 실제로는 버튼처럼 보이지 않습니다! @JOPLOmacedo 기본 버튼 모양과 유사한 테두리를 어떻게 추가합니까? – Michael

1

단추는 인라인 수준 요소입니다. 당신은 block 또는 inline-block에 그 변경해야합니다

#my_button { display: inline-block; height: 200px; } 

Live Example

+1

그래도 문제가 해결되지 않습니다. 어쨌든 당신의 노력에 감사드립니다. – MI5

+1

어떻게 문제를 해결할 수 있습니까? 너 뭐야? 내 모범이 당신에게 효과가 있습니까? 설명없이 "작동하지 않습니다"와 같은 코멘트를 남기지 마십시오! –

+2

내 Mac에서 "실제 예제"는 의 높이를 조정하지 않습니다.

0

당신은 또한 확대 버튼의 글꼴 크기를 늘릴 수 있습니다. CSS에서 설정하면 승리 사파리와 크롬 7 버전에

+0

인라인 블록이 테이블 내에서 작동하지 않기 때문에 그렇게해야합니다. – Rusty

관련 문제