Re: Shrink to fit

Brad Kemper wrote:
> On Sep 26, 2009, at 1:14 PM, Eduard Pascual <herenvardo@gmail.com> wrote:
> 
>> On Sat, Sep 26, 2009 at 7:38 PM, Brad Kemper <brad.kemper@gmail.com> 
>> wrote:
>>> I don't understand why this couldn't have been accomplished with
>>> inline-block elements inside a text-align:center element.
>>
>> Sorry, my bad. I just have tested the "menu" thing alone and it seems
>> that display:inline-block + text-align:center does the job. Of course,
>> it breaks miserably on IE7 and earlier, which I guess was the reason I
>> had to mess so heavily with the code.
>> Since it is pointless to discuss legacy browsers' incompatibilities
>> here, please ignore that example and accept my apologies for the
>> mistake.
>>
>> Regards,
>> Eduard Pascual
> 
> IE6 and higher can do a good job on display:inline-block as long as the 
> original HTML object was inline or inline-block to begin with. So, it 
> would not work on LI elements, but a series of A elements (without the 
> list structures) should work. Just an FYI. 
> 
> 
Actually, it is not necessary that the original element be inline or 
inline-block to begin with; just that its computed style be inline with 
hasLayout.  The latter can be induced by zoom:1 if no other 
hasLayout-triggering properties[1] are in use.  This inline-block 
behaviour can be seen in action in an [unrelated] test case.[2; last 
example]

IE7 (but not IE6) recognizes a display value called "inline-block" but 
its only effect is seemingly to induce hasLayout, whilst the element 
continues to use its native display value.

Hence, ironically, using display:inline-block is the one 
hasLayout-inducer we /can't/ use to help achieve inline-block behaviour 
on block-level elements since we must have display:inline!

(Brad's comment describes one special case: if the original element was 
display:inline to begin with and is then given display:inline-block (or 
hasLayout via some other means in IE6), then inline-block behaviour occurs.)

Inline-block behaviour has thus been reliably achievable in all the 
commonly-supported browsers since the middle of this year, ever since 
Firefox 2 (which didn't support it other than via unstable internal 
properties) dropped off the radar.

[1] http://www.satzansatz.de/cssd/onhavinglayout.html#wherefrom
[2] 
http://dev.moonhenge.net/css21/test-cases/tables/table-cell-slideshows.html

Cheers
Anton Prowse
http://dev.moonhenge.net

Received on Sunday, 27 September 2009 14:33:10 UTC