html - Internet Explorer Can't Adjust Inline List Item Width? -
i have unordered list list items displaying inline. however, layout rather complicated, let me show fiddle:
- fullscreen: http://jsfiddle.net/spryno724/f5cfd/embedded/result/
- code: http://jsfiddle.net/spryno724/f5cfd/
notice how unordered list items stretch height of tallest list item, using display: table-cell
property (except first list item). allows first list item have vertical line extend entire height of unordered list, letter "a" vertically aligned top.
this presentation works excellent in browsers, notable exception of internet explorer 8[1], of course. here screenshots, in case don't have ie8:
- excellent rendering in chrome: https://picasaweb.google.com/lh/photo/oi6rwht8is_0nkvqrb1o_hv2jjoobc4dmf1moksl3b4?feat=directlink
- ie8 rendering same page, ie developer tools highlighting erratic width of third list item: https://picasaweb.google.com/lh/photo/_n-wvfhygurpj6jtdk24kxv2jjoobc4dmf1moksl3b4?feat=directlink
any ideas can keep same see in chrome (or other browser other ie1-ie8)?
thank time.
[1] have ever done ie8 hate so???
unfortunately, ie doesn't render table-cell property, have resort various hacks. fortunately, 1 works pretty well.
ul li { display: inline-block; *display:inline; zoom: 1; height: 100%; max-width: 130px; min-width: 130px; padding: 0px 0px 0px 15px; vertical-align: bottom; }
this allow elements align in inline-block fashion in ie, giving cross-browser inline elements.
Comments
Post a Comment