How to make a cross-browser menu with rubber blocks?

Question

css

Task: to make a menu with rubber blocks and animation.

For clarity:


The left block contains menu items that can be of any width (depending on the text), but with the same padding.

In the right blog there is an input text, with focus on which the value of the menu item paddings decreases and the block with the input (and the input itself) increases.

I solved the problem as follows:
jsfiddle.net/andrhohlov/mD7Nd/1

But there is a cross-browser problem.

If the .b-search-form block has the "display: table" property, then the input in IE10 becomes 100% of the .b-global-nav width and extends far beyond the menu.


If you do not specify this property, then we have a problem in Firefox - a fixed input'a size.


In Chrome and Opera, everything is fine with any value of the property. Didn't check in Safari.

Requires IE9+ support

Answer 1

Try playing with the display property . This may be suitable:
Chrome, Opera and Safari on the same engine - webkit, they display everything the same.