익스와 파폭에서 다르게 보이는데.. 아무리 해봐도 답을 찾을 수가 없네요
큰가람
사용이미지
익스파폭
사용소스입니다.
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlns=http://www.w3.org/1999/xhtml lang=ko
head
meta http-equiv=Content-Type content=text/html; charset=utf-8
title버튼/title
style
!--
button {font-family:돋움,Dotum; height:21px; margin:0; padding:0 0 0 5px; border:0; background:url(image/btn/btn_green_bg.gif) left top; cursor:pointer; color:#fff;}
button span {overflow:hidden; top:0; margin:0; height:21px; padding:4px 8px 5px 5px; background:url(image/btn/btn_green_bg.gif) right top;}
}
--
/style
/head
body
button type=buttonspansdff렬asdfasdfasdfsadf/span/button
/body
/html
아시는 분 답변 부탁드립니다..
-
두루
아, 파폭에서 button이 좀 이상해서, span과 button의 마크업 순서를 바꾸면 해결됩니다.
답글 올렸습니다. -
바름
감사합니다..정리가 너무 잘된 자료이군요..
좋은하루되세요~~ -
빛길
으미.. 감사합니다.. 너무도 잘되네요.. 코드에 대해 정확히 알지 못하는 상황에서 할라니 난감했는데 감사합니다..
좋은 하루되세요.~~~ -
꼬꼬마
span {display:inline-block;height:21px;padding:0 0 0 5px;background:url(btn_green_bg_createpd.gif) left top;}
button {height:21px;line-height:21px;padding:0 5px 0 0;margin:0 0 0 0;border:0;background:url(btn_green_bg_createpd.gif) right top; cursor:pointe -
솔찬
span의 height값이 안 먹기도 하겠지만 만약에 먹는다 하더라도 내부의 padding-top과 padding-bottom 값에 height값을 더한 값이 둘러싸고 있는 button의 값이 되어야 합니다.
저 소스대로라면 span의 height값은 12px이 되어야겠네요. font-size도 대략 12px일테니 line-height을 0으로 주시면 더불어 생기는 공백을 없앨 수도 있습니다. -
한내
큭.. 수다님이 답을 주셔서 적용해 보았으나.. 좀 다른 스타일이 되어버렸네요..
제가 잘못 넣은건지...ㅠㅠ
신경써서 써주셨는데.. 해결이 안되는군요..
익스에선 잘되는데 파폭이 왜저리 깨지는지 답답하네요.. -
DevilsTears
span은 inline요소이기 때문에, height나 top, padding-top 이 먹지 않습니다.
그래서 inline-block으로 지정하셔야합니다. -
시아
button {height:21px; line-height:21px; display:inline-block; background:url(이미지) no-repeat 0 0; cursor:pointer; margin:0; padding:0;}
button span {display:inline-block; height:21px; line-height:21px; vertical-align:middle; background:url(이미지) no-repeat ri