为什么这个CSS样式的按钮标签适用于除Firefox之外的所有浏览器？
为什么这个CSS样式的按钮标签适用于除Firefox之外的所有浏览器？
提问于 2012-01-24 06:33:45
在Firefox上，我的css样式的按钮(圆形，按钮文本前有小图标)在视觉上看起来很好，但当您单击时没有任何反应。就像a标签不在那里一样？
我的html：
<button class='xbutton' type='button'>
<a href="/nextpage"><img alt="Next step" src="/icons/tick.png" /> Next page</a>
</button>我的css：
button.xbutton{
padding:5px 10px 5px 7px;
line-height:17px;
}
button.xbutton {
background: #edeeed url("images/button-background.png") top;
border: 1px solid #c3c4ba;
font-family: helvetica, arial, sans-serif;
font-weight: normal;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
button.xbutton a:link, button.xbutton a:visited{
font-family: helvetica, arial, sans-serif;
font-weight: lighter;
font-size: 18px;
color: #000;
text-decoration:none;
}
button.xbutton:link, button.xbutton:visited, button.xbutton:hover, button.xbutton:active {
font-weight: normal;
background: #edeeed url("images/button-background.png") top;
}
button.xbutton:active {
background: #eaeaea url("images/button-background-active.png") top;
outline: none;
margin-top: 1px;
margin-bottom: -1px;
}回答 3
Stack Overflow用户
回答已采纳
发布于 2012-01-24 06:35:54
首先，它是无效的HTML。它不能包含锚点。该按钮正在提交表单，但您正在尝试使其同时跳转到超链接。你不能两者兼而有之。
Stack Overflow用户
发布于 2012-01-24 06:39:59
去掉button。没有理由需要它，而且它不是有效的HTML。
另外，浏览一下你的CSS、:link和:visited只适用于锚点，而不适用于按钮。
Stack Overflow用户
发布于 2012-01-24 06:59:31
HTML4 DTD明确指出不应该在按钮标记(http://www.w3.org/TR/html4/interact/forms.html#edef-BUTTON)中包含链接：
<!ELEMENT BUTTON - -
(%flow;)* -(A|%formctrl;|FORM|FIELDSET)
-- push button -->您可以尝试设置链接样式以获得想要的外观(尝试将当前样式应用于链接，它在jsFiddle上看起来还可以)，或者通过JavaScript附加一个事件处理程序来处理按钮上的单击。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8979593
复制相关文章
相似问题
腾讯云开发者
