A solution to a bug in IE6 with jquery-multiselect

When using jquery-multiselect (a control that transforms a drop-down box into a multi-select control with checkboxes), it should normally be like this:

The first bug can be solved by referring to 'png images are not transparent in ie6'.

When debugging the second bug, I found that the height of the div with the background color applied was normal, not just a little bit. It looked like it was covered by the white background of the 'Select All Cancel' button inside, but in fact, they did not set the background. After setting the height of the div to a fixed value, it becomes normal.

The strangest bug is the third one. Only the first option has no background color when the mouse moves over it, but the following options have it when the mouse moves over them. After debugging, I confirmed that the first option did trigger the corresponding event, and the .hover... class for setting the background was added normally. There was no special processing for the first option in the js code, and no relevant reference was found on the Internet. The demo downloaded from the official website also has the same problem when running in IE6.

I tried changing the border color to a striking red in the .hover... class. I found that when I hovered the mouse over the first option, I could not see a red border. For the other options, only the left border was red, as shown below. So I guessed that it was because it thought the width was 0. I added a width constant to the .hover... class and it was normal after trying width: 100%;. It's all right once it's solved.