developer tip

내부

optionbox 2021. 1. 8. 08:08
반응형

내부 중첩


나는이 <button>하이퍼 링크 태그 내부에, 다음과 같다 :

<button class="btn"><a href="#"></a></button>

이것은 Chrome 및 Safari에서 잘 작동하지만 Firefox에서는 작동하지 않습니다 (버전 20 테스트).

뭐가 문제 야?


모든 브라우저에서 작동하도록하려면 Firefox도 다음과 같이 변경해야합니다.

<a href="#"><button class="btn"></button></a>

부트 스트랩의 경우 빌리 해자에 의해 제안 또는 필요가 없었다 <button>단지 할 수있는 당신은

<a href="#" class="btn">GO</a>

이 작업을 수행하는 것이 더 좋습니다.

<a href="#" class="btn">Go!</a>

이 문제는 FF 및 IE (<10)에서 발생합니다. 브라우저는 단순히 링크로 사용될 때 태그 버튼을 좋아하지 않습니다.

부트 스트랩의 빠른 해결책은 btn btn-default 클래스 (또는 선택한 버튼 스타일)를 사용하고 제공하는 것입니다.

그러나 양식 (예 : 제출 버튼)에서 사용할 수 있으며 문제가 없어야합니다.


HTML 구조를 변경하는 대신 단순히 onclick 메소드를 사용할 수 있습니다. 변경을 허용하지 않는 것 (예 : 부트 스트랩 구성 요소를 목록 그룹으로 사용)과 주로 다음과 같은 경우 구조를 변경할 수없는 경우 버튼 안에 두 개 이상의 링크를 넣고 싶습니다.

<button class="btn"><a onclick="location.replace('YOUR_URL_HERE')"></a></button>

워드 프레스 wp_loginout 기능을 사용하는 경우 . 이 기능은 예를 들어 스타일링을 위해 둥지에 버튼 내부의 링크를 로그인 / 로그 아웃에 대한 링크를 만듭니다 사용하여 btn btn-primary바로 교체 <button>와 함께 태그를 <span>태그

<span class="btn btn-primary"><?php wp_loginout($_SERVER["REQUEST_URI"] ); ?></span>

이것은 책장 btn-group 스타일을 유지하는 데 도움이되었습니다.

<button class="btn btn-default" onclick="location.replace('YOUR_URL_HERE')">Click Me</button>

참조 URL : https://stackoverflow.com/questions/16280684/nesting-a-inside-button-doesnt-work-in-firefox

반응형