ml-странице, которую я делаю, я пытался сделать кликабельный div, используя html и css. Это отлично работало в некоторых основных браузерах, в которых я тестировал (Chrome, Firefox, Opera, Safari), а также на телефоне HTC, но когда я попытался протестировать его на Iphone, я заметил, что он просто не работает. Сами флажки даже не были выбраны.

Это мой (работает отдельно от Iphone) код:

HTML:

<div class="" style="height: 30px;">
        <div style="display: table; width: 100%;">
        <div style="display: table-row; width: 100%;">
        <div style="display: table-cell;">
        <label for="3171">Text....</label>
        </div>

        <div style="display: table-cell; text-align: right;">
        <input type="checkbox" id="3171" name="3171">
        </div>
        </div>
        </div>
        <label for="3171">
        <span class="blocklink">Invisible text</span>
        </label>
        </div>

CSS:

.blocklink {
    display: block;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    text-indent: -999em;
    top: 0;
    width: 100%;
}

Итак, как вы можете видеть, техника, которую я использую, в основном просто<label> распространяться по всему родителюdiv поэтому, где бы вы ни щелкнули, он помечает / снимает галочку со связанного флажка.

К сожалению, это не работает на IPhone. Можно ли будет как-то продолжать использовать эту технику, но также обеспечить поддержку IPhone? (Желательно без JavaScript, потому что я действительно стараюсь использовать только HTML и CSS)

Заранее спасибо,

Arne