Показать сообщение отдельно
  #14 (permalink)  
Старый 26.01.2013, 20:41
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Deff, а что мешает использовать ID и FOR ?? Ведь по большей части страницы то все равно генерятся серверным языком, дык прописать ИД не проблема вроде, и работает это по крайней мере везде одинаково, и CSS меньше и HTML проще:
<!DOCTYPE html>
<html>
    <head>
        <!--[if lt IE 9]><script src="http://ie7-js.googlecode.com/svn/trunk/lib/IE9.js"></script><![endif]-->

        <style type="text/css">
            .spoiler_block > input[type="checkbox"] {
                position: absolute;
                width: 0;
                height: 0;
                opacity: 0;
                z-index: -1;
                padding: 0;
            }

            .spoiler_block > .spoiler_box {
                display: none;
            }

            .spoiler_block > label i {
                background: url('http://st0.bbcorp.ru/img/minus.png') 4px 60% no-repeat;
                display: none;
                font-style: normal;
                cursor: pointer;
                padding: 0 0 0 16px;
            }

            .spoiler_block > label i:first-child {
                background: url('http://st0.bbcorp.ru/img/plus.png') 4px 60% no-repeat;
                display: inline-block;
            }

            .spoiler_block > input[type="checkbox"]:checked + label i {
                display: inline-block;
            }

            .spoiler_block > input[type="checkbox"]:checked + label i:first-child {
                display: none;
            }

            .spoiler_block > input[type="checkbox"]:checked ~ .spoiler_box {
                display: block;
            }
        </style>
    </head>
    <body>
        <div class="spoiler_block">
            <input id="spoiler1" type="checkbox" />
            <label for="spoiler1"><i>Открыть</i><i>Закрыть</i></label>
            <div class="spoiler_box">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            </div>
        </div>
        <div class="spoiler_block">
            <input id="spoiler2" type="checkbox" />
            <label for="spoiler2"><i>Открыть</i><i>Закрыть</i></label>
            <div class="spoiler_box">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            </div>
        </div>
        <div class="spoiler_block">
            <input id="spoiler3" type="checkbox" />
            <label for="spoiler3"><i>Открыть</i><i>Закрыть</i></label>
            <div class="spoiler_box">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            </div>
        </div>
    </body>
</html>
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine

Последний раз редактировалось devote, 26.01.2013 в 21:03. Причина: добавил padding для checkbox что бы ИЕ8 не делал пунктирную рамку
Ответить с цитированием