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 Browser中不起作用，但它们适用于Firefox和Chrome - Android 4.1（悬停适用于点击，但触摸屏正常）。

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

移动网站链接是静态的

1 个答案: