<div><a /></div> instead of <button />?

I开发者_如何转开发've inherited an existing website to maintain and upgrade.

One of the site's quirks is how it does buttons.

It has html like this:

<div class="btn">
    <a id="dv_remCont" runat="server" href="#" onclick="removeContact();">remove contact</a>
</div>

and css like this:

div.btn a {
        font-weight:bold;
        display:inline-block;
        border-radius: 2px;
        padding: 0 1.2em 0 1.2em;
        color:#ffffff;
        background-color:black;
        box-shadow: 0px 0px 5px 1px #898986, inset -1px -1px 1px rgba(0,0,0,0.5), inset 1px 1px 1px rgba(255,255,255,0.8), 0px 0px 1px 1px #000000;
    }
div.btn a:hover {
    box-shadow: 0px 0px 5px 1px #898986, inset 1px 1px 1px rgba(0,0,0,0.5), inset -1px -1px 1px rgba(255,255,255,0.8), 0px 0px 1px 1px #000000;
}

This creates a clickable button. It does cause some complications, though - not using a regular <button /> means default functionality for stuff like forms doesn't work. Also, there are some issues with alignment in IE8 and below.

What are the advantages of doing buttons like this? Have you seen them done in this style before?

I can think of no specific reason to do this - other than the developer not being able to quite reset the button style to nothing before creating the custom style.

For example, even if you reset all padding, border, background, margin - the button still doesn't quite look unstyled in Firefox 3.6 or IE 7 or 8 - which if you've inherited the code are probably the target browsers when it was being written.

This is an example you can use to play with - I have added a border reset to the style to make the button and fake button look closer, You would also have to add text-decoration: underline if you want it to look exactly the same, but I couldn't bring myself to have a button that already looks clickable include an underline!

http://jsfiddle.net/Sohnee/7Eakq/1/