Table 切换在 Safari 中不起作用...在 Chrome 中工作正常

Question

我有一个简单的 table，它也有一个偏移的 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>

Answer 1

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

body 中有一个样式声明，而不是 head 元素。这被 HTML 验证器识别为非法 HTML。下面的代码片段将其移至头部。

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

第一行有第三个单元格，但后续行没有。这被验证器视为警告。我不知道 table 的布局在这种情况下应该如何显示，但当然结果会因固定设置而变得复杂，该设置使第三个单元格在视觉上脱离了流程。

此代码片段取出第 3 个单元格，并在 table 之前放置一个按钮。与其他更改一起，Safari 和 Chrome/Edge 现在的行为相同，Safari 在 border-collapse 上执行预期的行为。

按钮的位置需要修改 - 也许按钮加上 table 应该放在一个容器中，以便定位？这取决于具体需要什么来固定它的位置。

<!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>

Table 切换在 Safari 中不起作用...在 Chrome 中工作正常

Table toggle not working in Safari... works fine in Chrome

html

css

safari

html-table