2

私は、ハンドヘルド、タブレット、デスクトップ用のさまざまなバージョンのCSSを使用して、学校のWebベースアプリに取り組んでいます。私はこれにメディアクエリを使用しています。アプリはほぼ完成しており、ほぼすべてのブラウザとAndroidで正しく動作します。このアプリは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

divの代わりに<button>orタグを使用する必要があります。ボタンの機能は一部のブラウザで機能する場合がありますが、従来のボタンタグと比較すると少しハックになる可能性があり<input type="button">ます<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 に答える