2

我正在为我的学校开发一个 web 基础应用程序，其中包含适用于手持设备、平板电脑和台式机的不同版本的 CSS。我正在为此使用媒体查询。该应用程序几乎完成，它几乎可以在所有浏览器和安卓系统上正常运行。该应用程序在 Iphone/Ipad 上看起来很棒，但是按钮不起作用，使该应用程序在这些设备中无用。

这就是我所拥有的：

//Source code

<div id="signinbutton" class="blue_button">Sign In</div>

//desktop.CSS

.blue_button {
    width: 130px;
    height: auto;
    padding: 8px;
    margin: 0% auto 20% auto;
    background-image:url(../../images/bluebar5.png);
    color: #FFF;
    text-align: center;
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 14pt;
    font-weight: bolder;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    cursor: default;
    }
.blue_button:hover {
    opacity: 0.7;
}

//Handheld.css (this overwrites css on desktop)

.blue_button {
    width: 260px;
    font-size: 18pt;
    background-image:url(../../images/bluebar6.png);
}

我尝试将样式应用于#signinbutton，但没有成功。

4

3 回答 3

7

您应该使用<button>or<input type="button">标记而不是 div。虽然<div>按钮功能可能在某些浏览器中工作，但与传统的按钮标签相比，它可能有点小技巧

于 2013-03-07T20:13:23.083 回答
0

你可以像这样包裹你的div <a>。现在对 html5 完全有效。

<a href="#"><div id="signinbutton" class="blue_button">Sign In</div></a>

您只需要调整参考： https ://css-tricks.com/snippets/jquery/make-entire-div-clickable/

于 2016-12-01T16:04:42.687 回答
-1

尝试添加到div {cursor:pointer}.

于 2015-11-08T15:23:44.623 回答