Div display:initial not working as intended in ie10 and chrome 29

Question

I want to display a div with the following restrictions:

• automatically hide under 1024px width
• can be toggle by button under 1024px width, but if I click somwhere (not inside the div) the activeDiv class should be removed

I have a dummy example at codepen

So the following problems occured:

• In IE10 the toggle button just not work (not hide/show the div) I check with the developer tools, but no sign of the display: initial
• In Chrome 29 the div appeard next the button not under it. (Firefox is the same)
  I know that the default display for div is block, but this css is not only for div tags that's why I try to use initial.

Answer 1

initial does not mean "the default value of a given property for a given element". It means "the default value of a given property as defined by the spec". The initial value of display is inline, not block, as stated here. This is regardless of what sort of element you apply it to. And as already mentioned, IE does not support the initial keyword.

If you want an element to be displayed as a block, use display: block. If you want it to be displayed inline, use display: inline. If you want it to use whichever is the browser default for it, do not set the display property at all.

Answer 2

what do you mean by this?

this css is not only for div tags

display:initial is CSS3 and not supported by IE10. If no display-rule is specified it can inherit from, it will fall back to display:inline.

display:block;
display:initial;

provides a fallback display:block.