Почему этот тег в стиле CSS работает со всеми браузерами, кроме Firefox?

Question

В 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;
}

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 для обработки нажатия на кнопку.