Question

我继承了现有网站进行维护和升级。

该网站的一个怪癖是如何处理按钮。

它有这样的HTML：

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

和css是这样的：

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;
}

这会创建一个可点击按钮。但它确实会引起一些复杂性 - 不使用常规<button />意味着表单之类的东西的默认功能不起作用。此外，在IE8及以下版本中存在一些对齐问题。

做这样的按钮有什么好处？你以前见过这种风格吗？

Answer 1

我认为没有具体的理由这样做 - 除了开发人员在创建自定义样式之前无法将按钮样式重置为空。

例如，即使您重置所有填充，边框，背景，边距 - 在Firefox 3.6或IE 7或8中按钮仍然看起来不太方便 - 如果您继承了代码，则可能是目标浏览器什么时候写的。

这是一个你可以使用的例子 - 我已经为样式添加了边框重置以使按钮和假按钮看起来更近，你还需要添加文本修饰：如果你想让它看起来下划线完全相同，但我不能让自己有一个看起来可点击的按钮包括下划线！

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

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

1 个答案: