: только ребенок не отображается в Webkit / Safari - PullRequest
Новая
       13

: только ребенок не отображается в Webkit / Safari

2 голосов
/ 17 января 2012

Я пытаюсь заставить это работать: 

<!doctype html>
<html>
<style>
    section{
        display: none;
    }
    section:only-child {
        display: block;
    }   
</style>
<body>
    <section>This should be visible</section>   
</body>
</html>

Я считаю, что текст «Это должно быть видно» должен быть видимым! Это также относится и к Firefox. Firebug, как и веб-инспектор Safari, тоже так думают.

Однако, если вы откроете страницу в Safari (OSX и iPhone), текст не будет отображаться. Почему это?

Ответы [ 2 ]

3 голосов
/ 18 января 2012

Я проверил ваш код, также с типом документа и с элементом, отличным от HTML5 (div).Все браузеры webkit, которые я мог протестировать, имели проблемы: Safari-on-Windows 5, Chrome Windows, Chrome Linux, Epiphany-webkit.

Однако при переходе от состояний отображения к цветам фона веб-набор работал нормально.Изменение других состояний отображения, таких как float, также работало нормально.

Скорее всего, это ошибка (хотя я не видел ее в поисковых системах, но я не искал bugs.webkit.org) исключительно из-за измененияотображать состояния.Это также работает нормально, если элемент вначале установлен в блок, а для параметра only-child установлено значение none, поэтому он будет переопределять отображение: none.Инспекторы открывающихся элементов, кажется, запускают отображение CSS, которое остается до обновления.

Ваш код (если вы также добавляете тип документа) выглядит довольно хорошим тестовым примером.Если эта ошибка отсутствует на bugs.webkit.org, вы можете отправить этот код.

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

0 голосов
/ 03 июня 2013

У меня та же проблема, и я нашел этот обходной путь:

http://jsfiddle.net/ZxAnH/ 

section {
    height: 0;
    overflow: none;
}
section:only-child {
    height: auto;
}

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

...