브라우저에서 HTML5 '버튼'태그가 작동하도록하기

Question

현재 HTML5를 사용하여 대학 프로젝트를 진행 중입니다. 버튼 태그를 사용하여 모든 코드를 작성했습니다. 크롬을 사용하여 사이트를 테스트했지만 버튼이 IE와 Firefox에 표시되지만 작동하지 않는 것으로 나타났습니다.

이 문제를 해결할 방법이 있습니까? 아니면 버튼 태그가이 브라우저에서 작동하지 않습니까?

이 코드는 크롬에서는 완벽하게 작동하지만 다른 브라우저에서는 제대로 작동하지 않습니다.

<div class="option" id="question1" style="display:none"> 
<p> Which way do you think the criminals have fled?</p> 
<p>Up the Stairs <button class="arrow" id="stairs"><a href="upstairs.html"><img src="images/arrow.png" width="15" height="15"/></a></button></p> 
<p>Down the Alley <button class="arrow" id="alley"><a href="alley.html"><img src="images/arrow.png" width="15" height="15"/></a></button></p> 
</div> 

Answer 1

button 요소에는 대화 형 자손을 사용할 수 없습니다. 자, a 태그를 button 요소의 하위 태그로 사용할 수 없습니다. button에서 a 태그를 삭제하고 필요에 따라 코드를 변경하십시오.

자세한 내용은 button Element in the HTML Specification을 참조하십시오.

예

<div class="option" id="question1" style="display:none;"> 
<p>Which way do you think the criminals have fled?</p> 
<p>Up the Stairs <button class="arrow" id="stairs"><img src="images/arrow.png" width="15" height="15"></button></p> 
<p>Down the Alley <button class="arrow" id="alley"><img src="images/arrow.png" width="15" height="15"></button></p> 
</div>