【HTML】Chromeで<label>の中の<button>が効かない

以下のHTMLソースを作成しました。
「クリック」の部分を押下すると、「ポップアップ」の文字とポップアップの窓と「閉じる」ボタンが表示され、
「閉じる」ボタンをクリックすると、「ポップアップ」の文字とポップアップの窓と「閉じる」ボタンが非表示になるソースです。

<!DOCTYPE html>
<html lang="ja">
 <head> 
  <meta charset="Shift_JIS" /> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
  <title>a</title> 
  <meta name="description" content="" />
<style>
/* ポップアップウインドウの設定 */
.popup {
  background-color: #F8F8F8;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .8);
  display: none;
  position: fixed;
  top: 10px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 90vw;
  overflow-y: scroll;
  z-index: 999;
}

/* チェックボックスの初期設定 */
#popup-on{
  display: none;
}
/* チェックされたらポップアップウインドウを開く */
#popup-on:checked + .popup{
  display: block;
}

/* ポップアップの内容 */
.popup-content{
  margin: 40px auto 40px auto;
  width: 90%;
}
</style>
 </head> 
 <body> 
  <div> 
  
     <!-- メッセージ -->
     <div class="btn-open">
           <label for="popup-on">
                クリック
           </label>
         
     </div>
     <!--ポップアップ -->
     <input type="checkbox" id="popup-on">
     <div class="popup" >
       
        <label for="popup-on">
          <button>閉じる</button> 
        </label>
      </div>
     </div>
     
     
 </body>
</html>

この「閉じる」ボタンですが、
IEやSafariでは動くのですが、
Chromeでは動きません。
<button>を<div>に書き直すとChromeでも正常に動くのですが、
ほかのCSSの関係上できれば<button>でやりたいです。

ネットで対応策をいくつか探し試しましたが
解決できず質問させていただきます。

また、Chromeでは動かない理由をご存じでしたら
こちらも教えていただきたいです。

行動規範の内容に同意します

回答2件

ベストアンサー

残念ながら、<label>にforを書きつつ、内側に<button>を入れるのは、（forの指し先が内側のボタンである場合を除いて）正しい書き方ではありません。

Content model:

Phrasing content, but with no descendant labelable elements unless it is the element's labeled control, and no descendant label elements.（HTML LSより）
（抄訳：<label>の中身はフレージング・コンテンツであるが、別な<label>を含むことはできず、そして<label>の指し先でないフォーム要素を含めることもできない）

このような複雑な処理を行うのであれば、JavaScriptを使うのが適切です。

投稿2019/10/09 00:50

maisumakun

総合スコア145967

あとはbuttonやinput type=buttonではなくspanやdivなどのタグで調整するとかですかね

HTML
1<div class="btn-open">
2<label for="popup-on">
3クリック
4</label>
5</div>
6<input type="checkbox" id="popup-on">
7<div class="popup">
8<label for="popup-on">
9<div>閉じる</div> 
10</label>
11</div>