Chrome + jQuery hide/show inline

Question

Hello I have these things

<ul class="ul_std"  style="float:right">
             <li class="action_buttons" ><a id="button_deleteNormal" class="button_small button_small_red"  >Διαγραφή</a></li>
                <li class="action_buttons"><a id="button_editCancel" class="button_small"  >Ακύρωση Τροποποίησης</a></li>
                <li class="action_buttons"><a id="button_editNormal" class="button_small"  >Τροποποίηση</a></li>
                <li class="action_buttons" style="margin-right:0" ><a id="button_addNormal" class="button_small">Προσθήκη</a></li>
              </ul>

The problem is that i hide all of them except the anchor with id = button_addNormal at $(document).ready()... Everything works fine but at chrome when i want to show them ,it displays them as display:inline and not as display:inline-block ... The css class button_small have display:inline-block....

Firefox,IE 6+ works ok... Havent tested on safari but i hope that it would be ok...

Why chrome kills inline-block? The solution was to put .css("display","inline-block") instead of .show()

Answer 1

I can't reproduce this in chrome (at least in latest and 5.0.356.2 beta) based on your question.
See a working demo here on jsFiddle.

When I hide all but the last one with $('ul li a:not(#button_addNormal)').hide(); and show them all again, it comes back as inline-block. I tested in jQuery 1.3.2, 1.4.2, and nightly, same result (also tested/working in latest stable chrome: 4.1.129.1042).

Something else is breaking this in your page, hard to say what without the rest of the code.

Answer 2

I write a web store system in jsp, and a catch this error in last week. I think this problem is a caching problem, because a code works in Users.jsp, and same code not in Subjects.jsp. Both code work in FF, IE, Opera. Sometimes it works, sometimes not. Use hide('slow'), it's same solution...