jQuery Mobile custom icons on buttons look strange on iPhone

问题

experiencing this strange problem where custom icons are messed up on the iPhone, but no other device. Below is a screenshot, and further down my code. Can anybody shed any light on this? Got 1 pissed off client ;).

Thanks!

~Harley

<div data-role="controlgroup" data-type="horizontal" id="share">
    <a href="http://twitter.com/share?text=check out @lahznimmo's project: <?php the_title(); ?> - <?php the_permalink(); ?>" data-role="button" target="_blank" data-theme="c" data-iconpos="notext" data-icon="custom" id="tweet-share">tweet</a>
    <a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php the_title(); ?>" id="fb-share" target="_blank" data-role="button" data-iconpos="notext" data-theme="c" data-icon="custom" >fb</a>
    <a href="mailto:type%20email%20address%20here?subject=Check%20out%20this%20project%20from%20<?php bloginfo('name'); ?>&body=<?php the_title(); ?> - <?php the_permalink(); ?>" title="Email to a friend/colleague" id="email-share" data-role="button" data-theme="c" data-icon="custom" data-iconpos="notext" id="email-share">email</a>           
</div>

//CSS

#tweet-share .ui-icon{
    background: url(img/mini_twitter_icon.png) no-repeat center;
    border-radius: 0;
}

#fb-share .ui-icon{
    background: url(img/mini_facebook_icon.png) no-repeat center;
    border-radius: 0;
}

#email-share .ui-icon{
    background: url(img/mini_email_icon.png) no-repeat center;
    border-radius: 0;
}

来源：https://stackoverflow.com/questions/8091427/jquery-mobile-custom-icons-on-buttons-look-strange-on-iphone