Question

我已经看到了大量的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>标签的样式可以像按钮一样外观和工作，而不需要任何其他元素。

例如，请参阅为<a>标记生成CSS的http://www.cssbuttongenerator.com/，除了按钮文本外，其中没有任何内容。

有许多其他网站都有类似的教程和技巧，但我给你听到的基本建议是删除<div>和<button>，然后选择普通的{{1}标签。

希望有所帮助。

Answer 2

感谢您的反馈。我没有意识到在<a>标签中包含一个按钮是无效的，但果然，确实如此。无论如何，对此最简单的解决方法是放弃<a>标记，然后添加

onclick="window.location.href='<%=Url.Action("Action", "Controller")%>'"

到<button>元素，基本上将按钮变为链接。

ie9中的按钮和链接

2 个答案: