按钮不会单击移动 Safari答案

【问题标题】：Button Won't Click Mobile Safari按钮不会单击移动 Safari
【发布时间】：2013-04-29 21:59:35
【问题描述】：

我的网页上有一些按钮可以在我测试过的所有浏览器上正常工作，但移动 safari（Iphone、Ipad 等）

如果你去：http://www.divisionforty.com/

然后点击查看视频或更多信息，您会看到没有任何反应，因为同一页面上的另一个按钮可以正常工作。

代码如下：

    <div id="hero">
           <div class="page-header pull-left"><h1>you deserve a better web experience!</h1>
            <p>inroducing a complete web presence service that is designed to ease your companies workload while increasing user ease.<br> <a href="services.php"> learn more</a></p>


            <a href="#" id="videofade" class="button">watch video</a>                              


            </div>


    </div>

由于某种原因，只有这些按钮似乎不起作用。

希望有人能帮忙

丹佛

【问题讨论】：

检查你的 CSS。显示：阻止？
您是否在 CSS 上使用 display: 属性？我敢打赌您的按钮显示为内联元素或以某种方式具有零高度。
你介意看一下吗，因为我似乎找不到它所在的任何地方，或者为什么它只会在移动设备上的那个地方发生

标签： html mobile button twitter-bootstrap mobile-safari

【解决方案1】：

想出了一个解决办法。搞砸了，因为

<video id="videopromo" style="display:none;position:absolute;z-index:-1;" controls poster="video/video.jpg" width="100%" height="500">
  <source src="video/video.mp4" type="video/mp4">
  <source src="video/video.webm" type="video/webm">
  <object type="application/x-shockwave-flash" data="video/player.swf"
width="854" height="504">
    <param name="allowfullscreen" value="true">
    <param name="allowscriptaccess" value="always">
    <param name="flashvars" value="file=video.mp4">
    <!--[if IE]><!--><param name="movie" value="player.swf">
    <!--<![endif]-->


    <img src="http://devfiles.myopera.com/articles/4791/video.jpg" width="100%" height="500" alt="Video">
    <p>Your browser can't play HTML5 video. <a href="video/video.webm">
Download it</a> instead.</p>
  </object>
</video>

放在上面

<div id="heroslider">

            <div id="hero">
                   <div class="page-header pull-left"><h1>you deserve a better web experience!</h1>
                    <p>inroducing a complete web presence service that is designed to ease your companies workload while increasing user ease.<br> <a href="services.php"> learn more</a></p>


                    <a href="#" id="videofade" class="button">watch video</a>                              


                    </div>


            </div>

    </div>

我只是用 display:none 隐藏视频，点击按钮时取消。

现在一切正常，您可以在移动设备上测试http://divisionforty.com

丹佛

【讨论】：