图像链接无法在移动设备上使用

Question

我想在我的网站上获得一些非常基本的社交链接。我使用Twitters bootstrap以及一些自定义CSS。

移动图像（带链接）在桌面上运行良好，但在桌面或移动设备上测试时，我无法点击它。

下面的代码有问题：http://codepen.io/anon/pen/avZOor

.body { 
 
    background-color: #105b74; 
 
} 
 
.header { 
 
    padding: 0.5em; 
 
    padding-right: 3em; 
 
    float: right; 
 
    font-size: 11pt; 
 
    text-shadow: 1px 1px rgba(0, 0, 0, .3); 
 
} 
 
.header ul li { 
 
    float: left; 
 
    margin: 0 0 0 0.5em 
 
}

<div class="header"> 
 
    <ul class="nav"> 
 
    <li> 
 
     <a href="http://fb.com/redacted"> 
 
     <img src="http://imgur.com/BJbloCr.png" alt="Facebook Link" style="width: 30px; height: 30px;"> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="http://twitter.com/redacted"> 
 
     <img src="http://imgur.com/mOlTDAi.png" alt="Twitter Link" style="width: 30px; height: 30px;"> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="https://plus.google.com/u/0/redacted"> 
 
     <img src="http://imgur.com/MxqUrM2.png" alt="Google+" style="width: 30px; height: 30px;"> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="http://redacted.com/contact"> 
 
     <img src="http://imgur.com/WQyMo7e.png" alt="Contact Page Link" style="width: 30px; height: 30px;"> 
 
     </a> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

我有同样的问题，我删除从css文件浮法指令和它的工作