내부 중첩
나는이 <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
'developer tip' 카테고리의 다른 글
CoffeeScript는 JavaScript 스타일 == 같음 의미를 허용합니까? (0) | 2021.01.08 |
---|---|
Objective-C 자동 참조 계산과 가비지 수집의 차이점은 무엇입니까? (0) | 2021.01.08 |
현재 AngularJS 부트 스트랩 지시문과 호환되는 부트 스트랩 3? (0) | 2021.01.08 |
플라스크 응용 프로그램에서 전역 상태 유지 (0) | 2021.01.08 |
웹 API 인증 기본 vs 베어러 (0) | 2021.01.08 |