<button type =“submit”>无法按下&#39;在iPhone上</button>

时间:2014-08-15 15:31:36

标签: html ios css

我有一个响应迅速的网站,适用于所有设备。

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

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

Heres a fiddle of the form

我很困惑的是,如果我在iPhone上使用那个小提琴,你可以按下按钮。但在我的网站上,它不起作用。我不明白为什么会这样。

我将我的HTML和CSS复制到小提琴中,所以我没有改变任何东西。

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;
}

1 个答案:

答案 0 :(得分:0)

尝试从

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

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