Button based on tag A without internal span

The whole Internet is filled with articles on how to make an expandable button
based on CSS sprites .

But they all use the extra <span /> inside the <a> tag.
It is ugly and semantically wrong .
Need to make a button without using JavaScript and add. items.


I wanted to see such simplest HTML:
')
<a href="javascript: alert('!')" class="button"> </a>

After a long struggle, it turned out to be possible!
For Mozilla Firefox, Chrome, Opera - use .button: after CSS selector.
For IE6,7: HTC file that adds SPAN and classes to the button element.

Here is an example.

Checked in browsers: IE6, IE7, Firefox 3, Chromium 2.0.177.0 (14598), Opera 9.64.

Disadvantages:

• CSS not validated
• In IE, if there are a lot of buttons, it can “blink” with the default style when loading.
• Will not work in Firefox 2 - it does not support inline-block. This is basically solved .