[thelist] Border problem

[Dave Merrill]

A site I've worked on has a style that's supposed to be a light blue
background with a darker blue border. It's typically used on a span element.
The text used can be multiple lines, and the border should outline the whole
element, to the width of the widest line, like this:

----------------------
| asdf asdf asdf asdf |
| qwer                |
-----------------------

How can this be achieved in a way that works with common browsers?

IE, Firefox and Opera all put the border around each line separately, and
pack the lines too close together, unless there's some trigger that the
element is boxed. Height: 0 works for IE, but not on the other browsers.

Adding display: table fixes Firefox and Opera, but prevents the span from
sitting next to other elements. Display: inline-table sounds nice, but only
Opera cares.

Giving the span a static width instead works for everything but Firefox, and
nobody wants implement static widths everywhere anyway.

Is there a solution for this that works correctly in most browsers? It's
such a simple requirement.

Thanks,

Dave Merrill