Question

在Firefox上，我的css样式按钮（圆形，按钮文字前带有小图标）在视觉上看起来很好，但是当你点击时没有任何反应......就像a标签不存在一样？ / p>

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

Answer 1

摆脱button。没有理由为什么它需要它并且它不是有效的HTML。

此外，浏览您的CSS，:link和:visited仅适用于主播，而不适用于按钮。

Answer 2

嗯，这对于一件事来说是无效的HTML。它不能包含锚。按钮正在提交表单，但您正试图让它同时跳转到超链接。你不能两者兼顾。

Answer 3

HTML4 DTD清楚地表明您不应在按钮标记内包含链接（http://www.w3.org/TR/html4/interact/forms.html#edef-BUTTON）：

<!ELEMENT BUTTON - -
 (%flow;)* -(A|%formctrl;|FORM|FIELDSET)
 -- push button -->

您应该尝试设置链接样式以获得所需的外观（尝试将当前样式应用于链接，在jsFiddle上看起来很正常），或者通过JavaScript附加事件处理程序来处理按钮上的单击。 / p>

为什么这个CSS样式的按钮标签适用于除Firefox以外的所有浏览器？

3 个答案: