Div дисплей: начальный не работает, как задумано в ie10 и Chrome 29

Я хочу отобразить div со следующими ограничениями:

  • автоматически скрывать под шириной 1024 пикселей
  • можно переключать с помощью кнопки шириной менее 1024 пикселей, но если я щелкну где-то (не внутри div), activeDiv класс должен быть удален

У меня есть фиктивный пример на codepen

Итак, возникли следующие проблемы:

  • В IE10 кнопка переключения просто не работает (не скрывать / показывать div) Я проверяю с помощью инструментов разработчика, но никаких признаков display: initial
  • В Chrome 29 div появляется рядом с кнопкой, а не под ней. (Firefox такой же)
    Я знаю что по умолчанию display для див block, но это CSS не только для div теги, поэтому я пытаюсь использовать initial,
Источник

2 ответа

Решение

initial не означает "значение по умолчанию данного свойства для данного элемента". Это означает "значение по умолчанию данного свойства, как определено спецификацией". Начальная стоимость display является inlineне block, как указано здесь. Это независимо от того, к какому элементу вы применяете его. И, как уже упоминалось, IE не поддерживает initial ключевое слово.

Если вы хотите, чтобы элемент отображался как блок, используйте display: block, Если вы хотите, чтобы он отображался в строке, используйте display: inline, Если вы хотите, чтобы оно использовало браузер по умолчанию, не устанавливайте display собственность вообще.

Источник

Что ты хочешь этим сказать?

этот CSS не только для тегов Div

display:initial это CSS3 и не поддерживается IE10. Если не указано никакого правила отображения, от которого оно может наследоваться, оно вернется к display:inline.

display:block;
display:initial;

обеспечивает резервное отображение: блок.

Источник
Другие вопросы по тегам