[regression] Menu: menu often has border between label and right arrow (safari, chrome)

[bill]

On safari, in test_Tree.html, and in the drop down menus from the MenuBar in test_Menu.html, the menu shows a vertical bar between the labels and the arrows.

Looks OK on FF.

This started w/[16168] but it's actually due to a bug in safari. Test case from Cougar:

<table style="border:1px solid #7EABCD;border-collapse:collapse;">
            <tbody><tr><td></td><td colspan="2">one</td><td>&nbsp;&nbsp;</td>
</tr></tbody></table>

In order to reproduce this bug, it has to meet the following:

1. border-collapse is set to collapse
2. a td with colspan=2
3. there is a td before the colspan=2 td

[bill]

screen shot

[bill]

Filed ​https://bugs.webkit.org/show_bug.cgi?id=23378 against webkit.

[bill]

I don't want to release 1.3 w/this regression (even though it's due to a webkit bug). Can be worked around by:

1. don't use colspan=2, just always leave column for accelerators
2. don't use colspan=2 for webkit (note that problem is safari and chrome so the correct check is for webkit)
3. some clever CSS change to make the problem go away

[liucougar]

(In [16369]) fixes #8427: a css workaround for this webkit bug: explicitly hiding the right border of the td with colspan=2

[liucougar]

(In [16396]) refs #8427: oops, quote around 2 is required (I have this line in my local test_Menu.html file, this is the actually working workaround)