<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 />?

回答

相关问题