1

我已经看到了大量的 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 */
   }

有谁知道解决方法或破解这个？谢谢！

4

2 回答 2

1

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

在任何情况下，都不需要这种东西，因为<a>标签可以被设计为看起来和像按钮一样工作，而不需要在其中添加任何其他元素。

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

还有许多其他站点具有类似的教程和技术，但我给您的基本建议是放弃<div>and the<button>并使用普通<a>标签。

希望有帮助。

于 2012-07-28T08:20:17.867 回答
0

感谢您的反馈。我没有意识到将按钮包装在<a>标签中是无效的，但确实如此。无论如何，imo，最简单的解决方法是删除<a>标签，然后添加

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

到<button>元素，本质上是把按钮变成一个链接。

于 2012-07-30T12:46:23.357 回答