html - <button type ="submit"> 在 iPhone 上不能是 'pressed'

Question

我有一个在所有设备上都能正常运行的响应式网站。

但是，提交表单的按钮在 iPhone 上不起作用。你不能按它。我不知道为什么。

(注意:我正在 iPhone 4 上进行测试，所以我不知道这是否是旧款 iPhone 的问题)

Heres a fiddle of the form

让我感到困惑的是，如果我在 iPhone 上使用 fiddle ，您可以按下按钮。但在我的网站上，它不起作用。我不明白这是为什么。

我正在将我的 HTML 和 CSS 复制到 fiddle 中，所以我没有改变任何东西。

My site, click contact to see the form

这是表单的 HTML

<!--CONTACT OVERLAY-->
<div class="overlay" id="overlay"></div>
<div class="box" id="box">
    <p class="contactMessage">Message me, I'll get back to you</p>
    <a class="boxclose" id="boxclose"></a>
    <form method="post" action="index.php">
        <label for="Name">Name:</label>
        <br />
        <input name="Name" type="text" />
        <br /><br />
        <label for="Email">Email:</label>
        <br />
        <input name="Email" type="text" />
        <br /><br />
        <label for="Comments">Comments:</label>
        <br />
        <textarea name="Comments"></textarea>
        <br />
        <button type="submit" value="Send">Say hello</button>
    </form>
</div>

还有 CSS。 (SASS)

/*Contact Overlay*/
.overlay{
   background-color:black;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    height:100%;
    z-index:100;
    position:absolute;
    display:none;
    opacity:.75;
}

.box{
    position:fixed;
    display:none;
    width:350px;
    top:-300px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    background-color:#fff;
    color:#7F7F7F;
    padding:20px;
     border:2px solid #ccc;
    -moz-border-radius: 20px;
    -webkit-border-radius:20px;
    -khtml-border-radius:20px;
    -moz-box-shadow: 0 1px 5px #333;
    -webkit-box-shadow: 0 1px 5px #333;
    z-index:101;
    p{

        line-height:.85em;
        margin-left:10px;
    }
    label{
        margin-top:15px;
        font-family:'Yanone Kaffeesatz', sans-serif;
        font-size:30px;
        margin-left:10px;

    }
    input{
        width:85%;
        margin-left:10px;
        height:25px;
    }
    textarea{
        width:85%;
        margin-left:10px;

    }
    button{
        width:85%;
        margin-left:10px;

    }
}

@media (max-width: 600px){
    .box{
        width:250px;
    }
    a.boxclose{
        margin-top:-168px !important;
    }

}

a.boxclose{
    float:right;
    width:26px;
    height:26px;
    background:url(../img/cancel.png)repeat top left;
    margin-top:-130px;
    margin-right:-30px;
    cursor:pointer;

}

/*Contact Form*/
.contactMessage{
    margin-bottom:25px;
}

Answer 1

尝试改变

<button type="submit" value="Send">Say hello</button>

到

<input type="submit" value="Say hello" />