css - 移动网站链接变为静态

Question

这个问题困扰我很久了。我有我的普通网站，它有一个顶部很长的导航栏。在导航栏中，有四个文本链接可以正常工作。在我的移动网站中，这些链接指向图标。但是，发生这种情况时，链接不起作用(没有设置为具有的悬停颜色更改或任何其他内容)。网址可以看here ，有问题自己看吧。

这是我的导航栏的 HTML 代码:

<ul id="navbar">
            <li id="home"><h4><a href="./"><span class="navtext">Home</span><span class="navicon" data-icon="&#xe000;" aria-hidden="true"></span></a></h4></li>
            <li id="resume"><h4><a href="./resume/"><span class="navtext">Résumé</span><span class="navicon" data-icon="&#xe004;" aria-hidden="true"></span></a></h4></li>
            <li id="projects"><h4><a href="./projects/"><span class="navtext">Projects</span><span class="navicon" data-icon="&#xe003;" aria-hidden="true"></span></a></h4></li>
            <li id="files"><h4><a href="./files/"><span class="navtext">Files</span><span class="navicon" data-icon="&#xe001;" aria-hidden="true"></span></a></h4></li>
</ul>

这是我的导航栏 CSS:

#navbar {
width: 100%;
margin-top: 40px;}

#navbar li { 
display: inline;
position: relative;
width: 25%;
float: left;
text-align: center;
margin-bottom: 30px;
padding: 0;}

#navbar li a {
color: #0F0F0F;}

#home a:hover, a:focus {
color: #F28627;}

#hrhome {
border: solid #F28627;
border-width: 1px;
margin-bottom: 15px;}

#resume a:hover, a:focus {
color: #FC3C37;}

#hrresume {
border: solid #FC3C37;
border-width: 1px;
margin-bottom: 15px;}

#files a:hover, a:focus {
color: #8800B5;}

#hrfiles {
border: solid #8800B5;
border-width: 1px;
margin-bottom: 15px;}

#projects a:hover, a:focus {
color: #ED1F8D;}

#hrprojects {
border: solid #ED1F8D;
border-width: 1px;
margin-bottom: 15px;}

.navicon {visibility: hidden;}

@media only screen and (max-width: 767px) {
.navicon {
    visibility: visible;
    display: inline;
}
.navtext {
    display: none;}}

抱歉这么长的代码。我很确定问题将与 <div> 的某种类或 ID 有关。以及移动屏幕尺寸的媒体查询。我需要更改什么才能使按钮在移动屏幕上正常工作？

顺便说一下，这些按钮在经过调整大小的 Chrome(或其他互联网浏览器)上工作正常；只有在移动设备(手机、平板电脑)上才会出现问题。预先感谢任何答案。

Answer 1

链接在 Dolphin 浏览器中不起作用，但它们在 Firefox 和 Chrome - Android 4.1 上起作用(悬停在点击时起作用，但对于触摸屏是正常的)。

将 .navicon 更改为 display: inline-block; - 它修复了 WebKit 中的可点击性问题。