Backwards compatible comma list out of <ul>

I have the following code:

.taglist li{
display: inline;
}

.taglist li:after {
content: ", ";
}

.taglist li:last-child:after {
content:"";
}

it takes an unordered list of tags and makes it into a nice comma separated list. Of course in IE7 and earlier there is no space between the list. I'm wondering if anyone has any ideas on how to still use the list technique, but have it not look horrible in older versions of IE.? I tried also adding some margin-right to the li, but it pushed some of the text out of its container and caused it to wrap in very strange ways.

It might not be practical to do this, but it struck me as the开发者_高级运维 most semantic way.

Of course in IE7 and earlier there is no space between the list. I'm wondering if anyone has any ideas on how to still use the list technique, but have it not look horrible in older versions of IE.?

If just adding a small gap after each li in only IE7 and lower is good enough, use this:

.taglist li{
    display: inline;
    *padding-right: 6px; /* adjust to taste */
}

You can try ie7-js, maybe it helps. If you really care, and ie7-js doesn't work, you can write your own script to fix stuff by inserting text nodes for IE7 via JavaScript.

The best is to keep the HTML good, and try to fix stuff using JavaScript for broken browsers like IE7.