Div Display:initial Not Working As Intended In Ie10 And Chrome 29

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

Solution 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.

Solution 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.