Дисплей Div: начальный не работает, как предполагалось, в ie10 и chrome 29

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

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

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

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

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

Ответ 1

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

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

Ответ 2

что вы подразумеваете под этим?

этот css не только для тегов div

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

display:block;
display:initial;

предоставляет резервный дисплей: блок.