有人知道與Mac Safari相關的焦點狀態(tài)問題或標簽索引問題嗎？

去:https://codepen.io/Richard-Stelmach/pen/abRMpyj

嘗試在Mac safari中瀏覽內容，15。

沒有顯示焦點狀態(tài)。

如果你在Chrome中嘗試同樣的操作，會顯示一個焦點狀態(tài)，你可以在頁面上的相關元素間切換。

html，css中沒有設置焦點狀態(tài)，因為要使用瀏覽器默認的焦點狀態(tài)。

演示:

@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap');

*{
  line-height: calc(1ex / 0.32);
  font-family: 'Atkinson Hyperlegible', sans-serif;
}
@supports (font-size-adjust: 1;) {
    body {
        font-size-adjust: 0.5;
    }
}

.container{
  padding:24px;
}
.dark{
  background:#203240;
  color:white;
}
.dark a{
  color:white;
}
.light{
  background:white;
  color:#203240;
}

fieldset{
  margin-bottom:24px;
}

h1 {
    font-size: 2.5em;
    line-height: calc(1ex / 0.42);
    margin: calc(1ex / 0.42) 0;
}

h2 {
    font-size: 2em;
    line-height: calc(1ex / 0.42);
    margin: calc(1ex / 0.42) 0;
}

h3 {
    font-size: 1.75em;
    line-height: calc(1ex / 0.38);
    margin: calc(1ex / 0.38) 0;
}

h4 {
    font-size: 1.5em;
    line-height: calc(1ex / 0.37);
    margin: calc(1ex / 0.37) 0;
}

p {
    font-size: 1em;
    line-height: calc(1ex / 0.32);
    margin: calc(1ex / 0.32) 0;
}

input{
  font-size:1em;
}

<div class='light container'>
  <h1>Focus states</h1>
  <h2>Default focus states</h2>
  <p>To help determine how browsers treat the <a >focus states</a> of elements, by default</p>

  <form action="http://www.example.com/cgi/subscribe/" method="post">
    <fieldset>
    <legend>Example radio buttons</legend>
      <div>
        <input type="radio" name="format" id="someRadio" value="Some radio" checked>
        <label for="someRadio">Some radio</label>
      </div>
      <div>
        <input type="radio" name="format" id="anotherRadio" value="Another radio">
        <label for="anotherRadio">Another radio</label>
      </div>
    </fieldset>
    <fieldset>
    <legend>Example checkbox</legend>
      <div>
        <input type="checkbox" name="example checkbox" id="check_1">
        <label for="check_1">Example checkbox</label>
      </div>
    </fieldset>
    <input type="submit" value="Submit" />
  </form>
</div>