【问题标题】:Image link is not clickable in responsive view图片链接在响应式视图中不可点击
【发布时间】:2015-06-26 16:29:29
【问题描述】:

我在我的标记中使用引导程序。我的标记很简单,看起来像这样

   <div class="col-md-5 col-xs-8 col-xs-offset-2  col-md-offset-1 logo">
        <a href="www.google.com">
                        <img src="images/new/header_logo.png" alt="Test"/>            
        </a>
   </div>

它在桌面上运行良好,当我点击图片时,它会将我带到 google.com。但它不适用于响应式视图。在响应视图中,如果我单击图像它什么也不做。

我也试过这样的

<div class="col-md-5 col-xs-8 col-xs-offset-2  col-md-offset-1 logo">
  <a href="www.google.com">
    <img src=images/new/header_logo.png" alt="Test" usemap="#maptest"/> 
  </a>
</div>
<map name="maptest">
  <area shape="rect" coords="0,0,128,128" href="www.google.com" alt="Test"/>
</map>

我还检查了以下stackoverflow问题,它没有解决我的问题

Image link on iPhone is not clickable

【问题讨论】:

  • 在响应式视图中,图像顶部可能有一个不需要的 div。当您触摸屏幕时,将选择 div 而不是图像或锚点。尝试检查我提到的内容。
  • 我已经检查了我的文档,我的标记是由 w3c 验证的
  • 我的意思是当屏幕较小时,您的代码中不响应屏幕的其他 div 位于顶部。可能是因为不需要的宽度或高度。您可以在 ipad 上旋转到横向模式或触摸并按住图像一段时间以弹出以将图像保存为横向和纵向模式的弹出窗口。如果弹出窗口没有出现,那么肯定图像被 div 覆盖。

标签: image twitter-bootstrap responsiveness


【解决方案1】:

我已经找到了我的问题的解决方案,我将 z-index 添加到我想要点击的元素中

   <div class="col-md-5 col-xs-8 col-xs-offset-2  col-md-offset-1 logo">
        <a href="www.google.com">
                        <img src="images/new/header_logo.png" alt="Test"/>            
        </a>
   </div>

.logo {
   z-index:99999;
}

【讨论】:

  • 看起来图像已经被我之前提到的元素覆盖了。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-10-12
  • 2012-12-18
  • 2012-05-17
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多