css - ie9中的按钮和链接

Question

我见过很多 ie css 问题，但似乎没有一个能解决我在这里要问的问题。如果我错过了一个并问了一个骗子，请原谅我:)

我有一个网站(asp.net mvc2，c#)散布着与此类似的链接:

<a href="<%= Url.Action("Action", "Controller")%>">
    <div class="buttons">
        <button type="button"> Click Me</button> 
    </div>
</a>

这些在 Chrome、FF 和 Safari 中工作正常，但在 IE9 中不行。按钮本身似乎取消了链接。换句话说，链接仅在按钮的最外边缘(如果有的话)处于事件状态。

我对 Css 不是很流利，但这是相关的一点(我认为，尽管我认为问题可能出在其他地方...):

    .buttons a, .buttons button{
       display:inline-block;
       text-align: left;
       float:left;
       margin:0 7px 0 0;
       background-color:#f5f5f5;
       border:1px solid #0b0101;
       border-top:1px solid #eee;
       border-left:1px solid #eee;    
       font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
       border-top-left-radius: 3px;
       border-top-right-radius: 3px;
       border-bottom-left-radius: 3px;
       border-bottom-right-radius: 3px;
       line-height:130%;
       text-decoration:none;
       font-weight:bold;
       color:#565656;
       cursor:pointer;
       padding:5px 10px 6px 7px; /* Links */
   }
   .buttons button{
       width:auto;
       overflow:visible;
       padding:4px 10px 3px 7px; /* IE6 */
   }
   .buttons button[type]{
       padding:5px 10px 5px 7px; /* Firefox */
       line-height:17px; /* Safari */
   }

有人知道解决方法或破解方法吗？谢谢!

Answer 1

我不确定你想用 <button> 达到什么目的<a> 内的标签标记，但它不是有效的 HTML，因此它不能正常工作也就不足为奇了——也许更令人惊讶的是它在某些浏览器中工作。

无论如何，不​​需要这种东西，作为一个<a>标签的样式可以设置为看起来和像按钮一样工作，而无需在其中添加任何其他元素。

例如，参见 http://www.cssbuttongenerator.com/为普通 <a> 生成 CSS标签内除了按钮文本外什么都没有。

还有许多其他网站提供类似的教程和技术，但我给您的基本建议是放弃 <div>和 <button>和一个普通的<a>一起去标签。

希望对您有所帮助。