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

I've inherited an existing website to maintain and upgrade.<div><a /></div> instead of <button />?

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?

來源

2011-10-03 Oliver

''？它建立在什麼系統上？ – BoltClock

asp.net，但這不是真的在這裏相關。基本上它只是錨定在div標籤內，然後定位錨點使其看起來像按鈕。 – Oliver

我想這與jQuery（javascript）有關。 http://webdesignerwall.com/tutorials/jquery-tutorials-for-designers – niktrs

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/

來源

2011-10-03 12:20:38 Fenton

感謝您的意見，這非常有幫助。當嘗試爲按鈕上的文本使用不同的字體來顯示周圍的文本時，我真的開始遇到這類按鈕的問題 - 很難獲得正確的垂直對齊。 – Oliver

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

回答

相關問題