按钮上的jQuery Mobile自定义图标在iPhone上看起来很奇怪

Question

遇到这个奇怪的问题，其中自定义图标在iPhone上搞砸了，但没有其他设备。下面是截图，并进一步下载我的代码。任何人都可以对此有所了解吗？得到1个生气的客户;）。

谢谢！

〜哈利

<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;
}