表格切换在 Safari 中不起作用...在 Chrome 中工作正常答案

【问题标题】：Table toggle not working in Safari... works fine in Chrome表格切换在 Safari 中不起作用...在 Chrome 中工作正常
【发布时间】：2021-11-07 04:44:07
【问题描述】：

我有一个简单的表，它也有一个偏移的 td 并用作切换。它在 3 种状态之间切换，并且在 Chrome 中运行良好。谁能帮我解释一下为什么它目前不能在 Safari 中运行，我还没有在其他浏览器中测试过，但希望解决方案也能在其他浏览器中运行。

附上图片和代码。

感谢您提供任何帮助和解决方案。

highlight {
    background-color: #86C440;
    color: white;
}

th {
  font-size: 30px;
}

tr {
  text-align: left;
}

td {
  font-size: 20px;
  background-color: #d4d6d3;
  cursor: pointer;
}

.center {
  margin-left: auto;
  margin-right: auto;
}

tr {
  position:relative;
  transform:scale(1,1);
}

td.last{
  position:fixed;
  border: 5px solid #d4d6d3;
  background-color: #4eafef;
  left: -46px;
  top: -46px;
  height: 7px;
  width: 7px;
  line-height: 7px;
  cursor: pointer;
}

    <html>
        
    <body>
<div id="switch">1</div>
<br><br><br><br><br><br><br><br>

<style>

  table          {border-collapse: collapse; border: 5px solid white; padding: 5px;}
  table td       {text-align: center; color: black; border: 5px solid white; padding: 10px; height: 66px; width: 66px;}
  
</style>


<table class="center">
 <tr>
   <td>1</td>
   <td>2</td>
   <td id="toggle" class="last" onclick="toggle1()"></td>
 </tr>
    <tr>
   <td>3</td>
   <td>4</td>
 </tr>
    <tr>
   <td>5</td>
   <td>6</td>
 </tr>
</table>

</body>

    <script>

    function toggle1() {

                var key = document.getElementById("switch").innerHTML;

              if (key == 1) {

                      document.getElementById("toggle").style.backgroundColor = "white";
                      document.getElementById("toggle").style.backgroundImage = "url('')";
                      document.getElementById("toggle").style.borderStyle = "solid";
                      document.getElementById("toggle").style.borderColor = "#d4d6d3";
                      document.getElementById("toggle").style.borderWidth = "5px";
                      document.getElementById("switch").innerHTML = 2;

                            //console.log("toggle clicked 1st time!");

              } else if (key == 2) {

                      document.getElementById("toggle").style.backgroundColor = "#a370f0";
                      document.getElementById("toggle").style.backgroundImage = "url('')";
                      document.getElementById("toggle").style.borderStyle = "solid";
                      document.getElementById("toggle").style.borderColor = "#d4d6d3";
                      document.getElementById("toggle").style.borderWidth = "5px";
                      document.getElementById("switch").innerHTML = 3;

                            //console.log("toggle clicked 2nd time!");

              } else if (key == 3) {

                      document.getElementById("toggle").style.backgroundColor = "#4eafef";
                      document.getElementById("toggle").style.backgroundImage = "url('')";
                      document.getElementById("toggle").style.borderStyle = "solid";
                      document.getElementById("toggle").style.borderColor = "#d4d6d3";
                      document.getElementById("toggle").style.borderWidth = "5px";
                      document.getElementById("switch").innerHTML = 1;

                            //console.log("toggle clicked 3rd time!");

              }

    }

    </script>

    </html>

【问题讨论】：

当您在 Safari 中说“它不工作”时，它有什么作用吗？您能否描述发生了什么（例如，是否有任何 console.logs 发生？）。
我不认为这是你的问题的原因，但只是要注意你有几个 ROW2 的 id。这不是合法的 HTML，id 必须是唯一的。考虑将它们更改为类。
在 Safari 中的修复似乎比在 Chrome 中更正确地工作 - 切换 td 在那里，但在屏幕上显示为负的左侧和顶部设置。有理由为此使用 td 吗？它使表格有点奇怪，一行中有 3 个单元格，其他行中有 2 个单元格。你能不能把它分成一个单独的元素，从而避免需要固定？
已替换 html，因此没有冲突的 ID。添加了第二张图片，显示了 safari 中正在发生的事情。（切换消失，白色边框未显示）。正如 A Haworth 指出的那样，切换开关可能不在屏幕上！仍然不确定如何修复。将尝试单独切换，但在实际表格中，在跨越它们的编号单元格上方还有其他单元格。
切换开关在 Safari 上，仅在屏幕外。对我来说，Safari 正在做正确的事情，修复了相对于视口的切换。

标签： html css html-table safari

【解决方案1】：

有一些问题似乎导致 Chrome/Edge 的行为与 Safari 不同。

在正文而不是头部元素中有一个样式声明。这被 HTML 验证器识别为非法 HTML。下面的 sn-p 将其移至头部。

有一个实现转换的 tr 元素的设置。这似乎鼓励 Chrome 将固定元素相对于表格开始而不是相对于视口定位。除了指出任何类型的转换似乎都会导致这种行为并且任何转换都会创建一个新的堆叠上下文之外，我对此没有完整的解释。

第一行有第三个单元格，但后续行中没有。这被验证器作为警告拾取。我不知道在这种情况下表格的布局应该是什么样子，但结果当然是由于固定设置使第三个单元格在视觉上脱离流程而变得复杂。

这个 sn-p 取出第三个单元格并在表格前放置一个按钮。连同其他更改，Safari 和 Chrome/Edge 现在的行为相同，Safari 在边框折叠时执行预期行为。

按钮的位置需要处理 - 也许按钮加表应该在一个定位的容器中？这取决于在固定其位置方面需要什么。

<!doctype html>
<html>

<head>
  <style>
    highlight {
      background-color: #86C440;
      color: white;
    }
    
    th {
      font-size: 30px;
    }
    
    tr {
      text-align: left;
    }
    
    td {
      font-size: 20px;
      background-color: #d4d6d3;
      cursor: pointer;
    }
    
    .center {
      margin-left: auto;
      margin-right: auto;
    }
    /* REMOVED
tr {
  position:relative;
  transform:scale(1, 1);
}
*/
    
    #toggle {
      position: fixed;
      border: 5px solid #d4d6d3;
      background-color: #4eafef;
      /* REMOVED
  left: -46px;
  top: -46px;
  */
      /* values changed */
      height: 30px;
      width: 30px;
      rline-height: 7px;
      cursor: pointer;
    }
  </style>
  <!-- MOVED FROM body -->
  <style>
    table {
      border-collapse: collapse;
      border: 5px solid white;
      padding: 5px;
    }
    
    table td {
      text-align: center;
      color: black;
      border: 5px solid white;
      padding: 10px;
      height: 66px;
      width: 66px;
    }
  </style>


</head>

<body>



  <div id="switch">1</div>
  <br><br><br><br><br><br><br><br>

  <div class="container">
    <button id="toggle" class="last" onclick="toggle1()"></button>

    <table class="center">
      <tbody>
        <tr>
          <td>1</td>
          <td>2</td>
          <!-- td last removed -->
        </tr>
        <tr>
          <td>3</td>
          <td>4</td>
        </tr>
        <tr>
          <td>5</td>
          <td>6</td>
        </tr>
      </tbody>
    </table>
  </div>


  <script>
    function toggle1() {

      var key = document.getElementById("switch").innerHTML;

      if (key == 1) {

        document.getElementById("toggle").style.backgroundColor = "white";
        document.getElementById("toggle").style.backgroundImage = "url('')";
        document.getElementById("toggle").style.borderStyle = "solid";
        document.getElementById("toggle").style.borderColor = "#d4d6d3";
        document.getElementById("toggle").style.borderWidth = "5px";
        document.getElementById("switch").innerHTML = 2;

        //console.log("toggle clicked 1st time!");

      } else if (key == 2) {

        document.getElementById("toggle").style.backgroundColor = "#a370f0";
        document.getElementById("toggle").style.backgroundImage = "url('')";
        document.getElementById("toggle").style.borderStyle = "solid";
        document.getElementById("toggle").style.borderColor = "#d4d6d3";
        document.getElementById("toggle").style.borderWidth = "5px";
        document.getElementById("switch").innerHTML = 3;

        //console.log("toggle clicked 2nd time!");

      } else if (key == 3) {

        document.getElementById("toggle").style.backgroundColor = "#4eafef";
        document.getElementById("toggle").style.backgroundImage = "url('')";
        document.getElementById("toggle").style.borderStyle = "solid";
        document.getElementById("toggle").style.borderColor = "#d4d6d3";
        document.getElementById("toggle").style.borderWidth = "5px";
        document.getElementById("switch").innerHTML = 1;

        //console.log("toggle clicked 3rd time!");

      }

    }
  </script>


  <script type="text/javascript">
  </script>
</body>

</html>

【讨论】：

非常感谢您的帮助和回答，我也非常感谢您花时间帮助我了解代码的实际作用。将继续调整代码以使切换器再次靠近表格。但你对我帮助很大。谢谢。