19-02-2011, 22:38
Właśnie pracuję nad pewną stroną internetową i staram się jej zapewnić prawidłowy wygląd w najpopularniejszych przeglądarkach. W większości elementów udało mi się to osiągnąć, ale problem pojawił się w przycisku...
Przeglądarki Google Chrome 9, Internet Explorer 9 i Opera 11 wyświetlają przycisk identycznie. Tylko Firefox 3 odstawia jakieś cyrki. Na załączonym obrazku zamieszczam porównanie.
Tak wygląda kod stylu dla tego elementu:
A tak kod HTML na stronie:
Na stronie ten przycisk ma jeszcze określony kolor, obrys, zaokrąglenia itp., ale to jest nieistotne. Chodzi mi tylko o położenie tekstu wewnątrz przycisku. Chcę, aby w każdej przeglądarce pionowe rozmieszczenie tekstu było identyczne.
Nie wiem, jak to uzyskać... vertical-align nie działa, line-height nie działa w Firefoxie, kombinowałem z padding i tu dla Firefoxa można to poprawić, ale przycisk psuje się w inncyh przeglądarkach...
Zaczynam się zastanawiać, czy w ogóle istnieje jakieś sensowne rozwiązanie tego problemu.
Przeglądarki Google Chrome 9, Internet Explorer 9 i Opera 11 wyświetlają przycisk identycznie. Tylko Firefox 3 odstawia jakieś cyrki. Na załączonym obrazku zamieszczam porównanie.
Tak wygląda kod stylu dla tego elementu:
Kod:
.input_submit
{
padding: 2px 7px;
height: 23px;
font-family: Arial;
font-size: 9pt;
}A tak kod HTML na stronie:
Kod:
<input type="submit" class="input_submit" value="Szukaj"/>Na stronie ten przycisk ma jeszcze określony kolor, obrys, zaokrąglenia itp., ale to jest nieistotne. Chodzi mi tylko o położenie tekstu wewnątrz przycisku. Chcę, aby w każdej przeglądarce pionowe rozmieszczenie tekstu było identyczne.
Nie wiem, jak to uzyskać... vertical-align nie działa, line-height nie działa w Firefoxie, kombinowałem z padding i tu dla Firefoxa można to poprawić, ale przycisk psuje się w inncyh przeglądarkach...
Zaczynam się zastanawiać, czy w ogóle istnieje jakieś sensowne rozwiązanie tego problemu.
