Taki sam wygląd przycisku dla różnych przeglądarek

[LukeRay]

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:

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.

[Kartofelek]

nie nie

[LukeRay]

nie nie

Negacja negacji to tak. Ale pewnie chciałeś przez to powiedzieć, że nic się nie da zrobić. Hm... Jeszcze z tym powalczę, ale pewnie będę musiał zmienić nieco sam projekt strony. Firefox to najpopularniejsza przeglądarka na świecie i akurat tylko ona się w tym przypadku źle się spisuje. Co za złośliwość losu...

[Kartofelek]

"Nie nie, bo samego nie nie da się odpowiedzieć
Ogólnie myślę, że temat do olania. Głównie dlatego, że każda przeglądarka robi guziki po swojemu. Np radiobuttony, selekty czy wreszcie file. Nie ma opcji zapanować nad tym bez skryptów, ale tego nie polecam.

[LukeRay]

Haha! A jednak, udało się! Teraz przycisk wszędzie wygląda tak samo. Do pliku CSS trzeba było dodać kawałek kodu, który czyta tylko Firefox:

Kod:

@-moz-document url-prefix()
{
    .input_submit  
    {
        padding: 0 3px 15px 3px;
    }
}

Dzięki tej poprawce przycisk wygląda prawidłowo. Trochę dziką wartość ma padding dla dolnej krawędzi, ale cóż poradzić, że Firefox właśnie takiej wartości potrzebuje, żeby przycisk wyglądał normalnie.

[Kartofelek]

Kurcze można się posikać. Serio. Zamiast dać nam webmasterom prawie wolną rękę co do wyglądu, to ludzie zmuszeni są kombinować.
Wystarczy spojrzeć na boilerplate Irisha, by zobaczyć ile głupich trików trzeba zrobić by w miarę to wyglądało.

A miało być tak pięknie. Po wojnie document.all vs document.layers miały być piękne standardy, wszyscy szczęśliwi itp. A wyszło na to, że nawet najgłupsza rzecz do kombinowanie nie wiadomo jakie. Z formami to już w ogóle porażka. Wymienione elementy - select, file ect to taka pięta Achillesa.

Nie mówiąc o babolach przeglądarek taki jak np background-position-y, którego nie obsługuje np Firefox ;(