Keskustelu: Nettisivujen teko: iPhone ja button elementti

Tässä on tullut eteen eräs harvinaisempi pulma, joka liittyy iPhonen tapaan tulkita html- elemetttejä. Miten seuraavan skriptin saa toimimaan iPhonessa:

<button><img style="width:100%" title="" src="kuva.png"/></button>

Tässä kuvan korkeus siis asettuu automaattisesti sen mukaan, mikä on sen leveys, yleensä suunnilleen 60 px.
Iphone ei ymmärrä suurentaa tätä buttonin korkeutta mitenkään, vaan näyttää buttonin normaalina kapeana painikkeena ikään kuin olettaen buttonin sisältävän lyhyen yhden rivin tesktin.

Buttonin korkeus saattaa olla määritelty oletustyyleissä. Oletko kokeillut esim. asettaa buttonille jonkun oman tyylin? Mieleen tulee jotain tällaista.

<button class='btn-wrap-img'><img style="width:100%" title="" src="kuva.png"/></button>

.btn-wrap-img {
    height: auto;
    overflow: hidden;
    display: inline-block;
}

Kiitos ehdotuksesta. Sain tämän toimimaan ilman, että yrittää tunnistaa selainta. Muutin buttonille leveyden ja korkuden arvoon 100% ja lisäsin kuvalle korkeuden 'auto'.

On huonoa käytöstä olla antamatta kuvalle eksplisiittisesti leveys- ja korkeusarvoja. Ota title-attribuutti kokonaan pois äläkä määritä sitä tyhjäksi merkkijonoksi. Alt-attribuutti on pakollinen, laita sille tyhjä merkkijono arvoksi. Napilla pitäisi myös olla tekstisisältö, jotta ihmiset tietäisivät, mitä se tekee.

Kiitos The. Tässä on kyseessä maksutapa sovellus, joka listaa eri pankkien logoja pienen pienen lomakkeen kanssa. On minulla tekstiä tuossa titlessä, vaikka tuossa esimerkissä se puuttuu. Se on hyvä olla, sillä pankin logo ei kaikille aina välttämättä nopeasti kerro, mistä pankista on kyse.
Tähän liittyvässä palvelunatarjoajan esimerkki-skriptissä ei ole minkäänlaista muotoiluja näille elementeille, lisään tuon Altin.

Jos tarkoitus on tehdä kuva lomakkeen lähettämiseen, hyvä vaihtoehto voi olla <input type="image">, jolloin button jätetään kokonaan pois.