0

タブレット用のWebアプリに取り組んでおり、スイッチのように見えるように、一連のdivとチェックボックスのラベルのスタイルを設定しました。（ここにJsFiddleがあります。）

iPad 2および3では正常に動作しますが、Samsung Galaxy Tab 2で表示すると、タブレットを縦向きから横向きに、またはその逆にしたときにのみ状態が変わります。

私もトランジションなしで試してみましたが、それでも同じ問題です。

Javascriptなしで欲しい効果を得る方法はありますか？

したがって、jsfiddleにリンクするだけではいけないので、コードは次のとおりです。

HTML：

<label class="switch" for="test">
    <input type="checkbox" id="test">
    <div class="track">
        <div class="knob"></div>
    </div>
</label>​

CSS：

label.switch > .track {
    width: 80px;
    height: 52px;
    border-radius: 60px;
    box-shadow: 0 1px 3px black inset, 0 -1px 1px rgba(255,255,255,0.15);
    /*border: 5px solid #666;*/
    display:inline-block;
    cursor:pointer;
    background: #333;
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0)));
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
    background: -o-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
    background: -ms-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
    background: linear-gradient(to bottom,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
    transition: background .5s;
    -webkit-transition: background .5s;
    -moz-transition: background .5s;
    -o-transition: background .5s;
    -ms-transition: background .5s;
}

label.switch > .track > .knob {
    height: 54px;
    width: 54px;
    border-radius: 50px;
    margin-top:-1px;
    box-shadow: 0 2px 3px black, 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 0 0 5px rgba(237,237,237,1) inset;
    transition: margin-left .25s;
    -webkit-transition: margin-left .25s;
    -moz-transition: margin-left .25s;
    -o-transition: margin-left .25s;
    -ms-transition: margin-left .25s;
    background: rgb(191,191,191);
    background: -moz-linear-gradient(top,  rgba(191,191,191,1) 0%, rgba(246,246,246,1) 53%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(191,191,191,1)), color-stop(53%,rgba(246,246,246,1)), color-stop(100%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top,  rgba(191,191,191,1) 0%,rgba(246,246,246,1) 53%,rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(top,  rgba(191,191,191,1) 0%,rgba(246,246,246,1) 53%,rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(top,  rgba(191,191,191,1) 0%,rgba(246,246,246,1) 53%,rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom,  rgba(191,191,191,1) 0%,rgba(246,246,246,1) 53%,rgba(255,255,255,1) 100%);
}


label.switch > input {
    display:none;
}

label.switch > input:checked ~ .track {
    background: #D96200

}

label.switch > input:checked ~ .track > .knob {
    margin-left:26px;
}
​
4

1 に答える 1

0

Androidタブレット（少なくともSamsung Galaxy Tab 2）には、デフォルトのブラウザーとして古いバージョンのChromeが付属しています。

このブラウザは、一般的な兄弟セレクタ（ ）を認識しません~。これが、アニメーションが機能しなかった理由です。

解決策は、隣接する兄弟セレクター（ ）の一般的な兄弟セレクターのすべての出現箇所を変更することです+。

于 2012-10-31T18:42:08.937 に答える