stranger-liquid

Дело вот в чем, не раз замечаю что в хроме нужно ставить line-height больше чем в других браузерах. К примеру слева FF IE Opera справа Chrome Safari Как справиться с этим? Юзаю хак, но хотелось бы разобратся в причинах такого рендера. И найти более правильное решение. @media all and (-webkit-min-device-pixel-ratio:0) { button.button span span { line-height:29px; } } HTML <button class="button"> <span> <span> Join </span> </span> </button> Извиняюсь за большой CSS - верстаю под magento а там шаблоны не ахти. А менять каждый темплит времени нет. button.button { border:0; padding:0; margin:0; background:transparent; overflow:visible; cursor:pointer; vertical-align:middle; } a.button, button.button > span{ border:0; padding:0 9px; cursor:pointer; display:-moz-inline-stack; display:inline-block; text-decoration:none !important; position:relative; background: #44c8f5; background: -moz-linear-gradient(top, #44c8f5 0%, #1a95bf 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#44c8f5), color-stop(100%,#1a95bf)); background: -webkit-linear-gradient(top, #44c8f5 0%,#1a95bf 100%); background: -o-linear-gradient(top, #44c8f5 0%,#1a95bf 100%); background: -ms-linear-gradient(top, #44c8f5 0%,#1a95bf 100%); background: linear-gradient(to bottom, #44c8f5 0%,#1a95bf 100%); -webkit-border-radius:3px; -moz-border-radius:3px; -ms-border-radius:3px; -o-border-radius:3px; border-radius:3px; } a.button span, button.button span span { display:-moz-inline-block; display:inline-block; white-space:nowrap; text-transform:uppercase; font:13px/25px 'FranklinGothicURW-Dem', Arial, Helvetica, sans-serif; height:24px; color:#fff; }