圖片取代文字圖片超連結桌機可行但手機會無法點選之問題

<a>總統府</a>

a{
height:1px;
overflow:hidden;
padding:30px 0 0 0;
background:url(image/icon.jpg);
}

以上設定在桌機呈現上 a是可以點選的，滑鼠移上去整個padding的區塊也會是有hover效果、也可以點擊的。但是換成行動裝置（手機、平板），點選icon會沒有反應。也就是在行動裝置上hover的範圍只有height:1px;不含padding的範圍。

改成以下在手機上就可以點

a{
height:31px;
overflow:hidden;
text-indent:-1000px;
background:url(image/icon.jpg);
}

就是還是要用縮排的方式隱藏文字。