Переключатель CSS без JavaScript не работает на Android 4.0.3

Selex

Я хотел бы сделать кнопку переключения, которая будет открывать более подробную информацию. Это отлично работает на моем ноутбуке, но не на моем мобильном телефоне. Почему это так? Я предполагаю, что это должно работать на Android 4.0.3, но это не так. Мой XHTML-код: Организация / 1 div
1 div, RG2

+ Привет, мир! Мой CSS-код:

.listaus-kilpailunimi {

ясно: оба;

поле: 0 пикселей;

отступ: 2 пикселя;

отступ слева: 32 пикселей;

цвет:#000000;

border-bottom:1px пунктир #444444;

}

span.listaus-seura-sarja {

цвет фона: # C4DCF8;

}

span.listaus-avauspainike {

плавать: вправо;

маржа-верх:-5 пикселей;

отступ-право: 0 пикселей;

}

label.listaus-avauspainike {

курсор: указатель;

отображение: встроенный блок;

отступ сверху: 10 пикселей;

отступ снизу: 10 пикселей;

граница: сплошная #FFFFFF толщиной 1 пиксель;

цвет фона: #13539B;

семейство шрифтов: Tahoma, Arial, «Times New Roman», без засечек;

вес шрифта: нормальный;

размер шрифта: 11 пикселей;

цвет: #FFFFFF;

выравнивание текста: по центру;

радиус границы: 5 пикселей;

-moz-border-radius: 5 пикселей;

-webkit-border-radius: 5 пикселей;

}

label.listaus-avauspainike:hover {

граница: сплошная 1 пиксель #D60C3C;

цвет фона: #D60C3C;

}

.listaus-valintaruutu {

дисплей: нет;

}

.listaus-sisalto {

}

.listaus-valintaruutu: проверено ~ .listaus-sisalto {

дисплей: блок;

}

.listaus-valintaruutu:not(проверено) ~ .listaus-sisalto {

дисплей: нет;

}

Итак, почему этот код не переключается при использовании Android 4.0.3?

sergeylsv

:not — это непредсказуемый кросс-браузер, советую НЕ использовать его.

Аналогично, если вы собираетесь играть с :checked, вам действительно нужно указать ПОЛНУЮ специфику. Где у вас это:

 

.listaus-valintaruutu ~ .listaus-sisalto {
display: none;
}

.listaus-valintaruutu:checked ~ .listaus-sisalto {
display: block;
}

Код (разметка): Я бы сделал это:

  .listaus-sisalto { } .listaus-valintaruutu:checked ~ .listaus-sisalto { display: block; } .listaus-valintaruutu:not(checked) ~ .listaus-sisalto { display: none; }

Код (разметка): Хотя какой браузер под 4.0.3 и/или какой версии? Доступно не только встроенное, но и как минимум три разные версии Chrome только в одной одноуровневой сборке Android... Ты, кажется, тоже немного обрадовался там.

На самом деле то, что вы делаете, большая часть этой разметки - это просто раздувание кода.

а value="checked" - это тарабарщина.

Если вы хотите, чтобы он сначала был проверен в XHTML, он должен быть отмечен = «проверено», а не значение = «проверено». Единственная причина указывать значение - это то, что оно все равно передается в форме на сервер.

Если у вас есть совершенно хороший класс в родительском элементе и нет таких же братьев и сестер, о которых стоит беспокоиться, не возитесь с созданием дополнительных классов для дочерних элементов.

(независимо от того, что сейчас говорит людям тупой полоумный мусор вроде CSSLint) -- кажется, у вас даже есть несколько "диапазонов даром", например, тот, который оборачивает метку, поскольку вы не делаете в этом интервале ничего, что нельзя было бы сделать с меткой.... Тем более, что все эти измерения в пикселях являются гигантским средним пальцем для доступности...

vdv1

Почему вы используете Android 4.0.3? Это как минимум 6 поколений, если не больше.

Во-вторых, какой браузер? Встроенный браузер Android? У него дрянная поддержка многих вещей, и ему может не понравиться CSS.

Если вы используете Chrome, он должен работать нормально.

Не могли бы вы дать ссылку на сайт, чтобы можно было протестировать?

Похожие темы	Дата
Сколько пикселей содержит одна фотография	19.10.2024, 18:10
Проблема с дочерней темой Wordpress	19.10.2024, 18:10
Пожалуйста, помогите мне с этим кодом get_categories	19.10.2024, 18:10
Рядом с логотипом img заголовок не отображается	19.10.2024, 18:10
Необходимо удалить метатег HTML с сайта WordPress.	19.10.2024, 18:10
Position vs float для достижения такого эффекта	19.10.2024, 18:10
Ищем менеджера по баннерной рекламе.	19.10.2024, 18:10
Javascript перебирает таблицу	19.10.2024, 18:10
Семантическая разметка HTML 5	19.10.2024, 18:10
Увеличение переменных приращений на единицу	19.10.2024, 18:10

Переключатель CSS без JavaScript не работает на Android 4.0.3

Selex

sergeylsv

vdv1

I AM

Интересно