Ticket #10734 (closed bug: invalid)
hide() and show() behave strangely for elements with 'float:left'
|Reported by:||anonymous||Owned by:|
Sample page with the behavior: http://jsfiddle.net/zee2G/1/
Steps to reproduce:
- Click the "Show" link. the content span with text "Sample Text" will appear below the links with a 'display:inline' styling.
- Click the "Hide" link. The expected behavior is that the content span will change to 'display:none'. The actual behavior is that nothing happens.
- Click the "Show" link again. The expected behavior is that, since the content span is already visible, nothing will happen. The actual behavior is that the content span's styling changes from 'display:inline' to 'display:inline-block'. The content's text will be split into two lines.
- Click the "Hide" link again. The content span will change to 'display:none', as expected.
- Return to step 1. Repeat until satisfied.
This behavior does not occur if you remove the 'float:left' styling from the subContent class.
The behavior occurs using jQuery versions:
The behavior is different using jQuery 1.4.4. Steps 1-3 have the same behavior as higher numbered versions. However, once the content changes to 'display:inline-block', the show and hide buttons work as expected - the content will alternate between 'none' and 'inline-block', and it is impossible to return to 'inline'.
The behavior is not reproducible in 1.3.2 or 1.2.6 - the content will alternate between 'none' and 'inline', which is the expected behavior.
Among the DTDs allowed by jsFiddle, the behavior will appear with:
XHTML 1.0 Transitional
HTML 4.01 Transitional
HTML 4.01 Frameset
The behavior will not appear for any other DTD allowed by jsFiddle.
The behavior will appear in Firefox if no doctype is specified, although I can't demonstrate that with jsFiddle.
The behavior is reproducible in browsers:
Firefox 3.6.20 (with safe mode enabled, and without safe mode enabled)
Internet Explorer 8.0.6001.18702, Browser Mode IE8, Document Mode IE8 Standards
The behavior is NOT reproducible in browsers:
Internet Explorer 8, Browser Mode IE7
Internet Explorer 8, Browser Mode IE8, Document Mode IE7 Standards
Internet Explorer 8, Browser Mode IE8, Document Mode Quirks
Microsoft Windows XP Professionsal
Service Pack 3
(Note: I have not tested all possible combinations of Browser, DTD, and jquery versions. My standard operating environment was jQuery 1.7, HTML 4.01 Transitional, Firefox 3.6.20, and I varied a single one of them while keeping the rest constant. For example, when testing different jQuery versions, I only used HTML 4.01 Transitional and Firefox. When testing different DTDs, I only used jQuery 1.7 and Firefox. etc etc.)