for my website, im using inline-block property. it works well for mozilla and ie8 but is displayed as block elements in ie7. how can i set it right?
The display: inline-block Value Compared to display: inline , the major difference is that display: inline-block allows to set a width and height on the element. Also, with display: inline-block , the top and bottom margins/paddings are respected, but with display: inline they are not.
Auto margins set the div horizontally in the center (horizontal placement). So, if you use inline-block and auto margins at the same time, you are trying to place the div horizontally in two different ways that clash with each other.
You can set a block-level element to display like an inline element by setting the display property to inline. You can also cause inline elements to behave like block-level elements using the display property.
No need to clear floats anymore. Compared to display: inline , the major difference is that inline-block allows to set a width and height on the element. Also, with display: inline , top and bottom margins & paddings are not respected, and with display: inline-block they are.
Have a look at this: http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ - at this point in time, IE8 was not out yet, so I believe the author is talking about IE7.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With