Question

When viewing my site in Windows/Mac/Android or any OS’s my site displays just as I want to. But in iOS (on an iPhone, iPod Touch, iPad etc) it makes the text inside a button look wierd.

![][1]

Here you can see the problem occur on an iPad. The button with “Male” is displayed correctly , but the “Female” button is displayed wrong. (the female gender sign is on the top)

Here is the code for the two buttons:

<button class="choose">&#9794; Male</button>
<button class="choose">&#9792; Female</button>

CSS code:

// body code for the whole document:
body{
    font-size:14px;
    font-family:"Lucida Grande", "Lucida Sans Unicode" Tahoma, Verdana, Arial, sans-serif;
    -webkit-font-smoothing:subpixel-antialiased;
    text-align:center;
    margin:0px;
    padding:0px;
}

// code just for the two buttons:
    .choose{
        font-size:15px;
        height:40px;
        width:100px;
    }

Does anyone know how to fix this?

Answer 1

Have you tried using a non-breaking space?

<button class="choose">&#9794;&nbsp;Male</button>