0

这个问题一直困扰着我一段时间。我有一个正常的网站，它有一个顶部很长的导航栏。在导航栏中，有四个可以正常工作的文本链接。在我的移动网站中，这些链接指向图标。但是，发生这种情况时，链接不起作用（没有悬停颜色更改设置为具有或任何东西）。该网站可以在这里看到，请随意查看问题。

这是我的导航栏的 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;}}

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

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

4

1 回答 1

0

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

更改.navicon为display: inline-block;- 这是对 WebKit 中可点击性问题的修复。

于 2013-07-23T14:26:58.083 回答