在刷新一切正常后，Chrome中的表格显示错误

Question

我的桌子有问题。在Firefox上它看起来很棒，但是当我在Chrome上打开它时，第一次使用表位于不同的位置。刷新修复一切。我做错了什么？

CSS

    #spec0{
    background-color: #FFFFFF;
    width: 566px;
    border: 1px solid #ddd;
    }

    #spec1{
    background-color: #F1F1F1;
    width: 566px;
    height: 20px;
    }

    #table {
    border-collapse: collapse;
    width: 566px;
    border: 1px solid #ddd;
    margin-top: 11px;
    position: static;
    }

    #tr{
    border: 1px solid #ddd;
    height: 10px;
    font-size: 11pt;
    text-align: right;
    }


    #tr1{
    border: 1px solid #ddd;
    height: 10px;
    font-size: 11pt;
    }

    #tr3{
    height: 10px;
    font-size: 11pt;
    border: 1px solid #ddd;
    text-align: left;
    }

HTML

<table id="table">
  <tr id="spec">
    <th id="tr">Template</th>
    <th id="tr3">Template</th>
  </tr>
  <tr id="spec1">
    <td id="tr">Template</td>
    <td id="tr1">Template</td>
  </tr>
  <tr id="spec">
    <td id="tr">Template</td>
    <td id="tr1">Template</td>
  </tr>
  <tr id="spec1">
    <td id="tr">Template</td>
    <td id="tr1">Template</td>
  </tr>
  <tr id="spec">
    <td id="tr">Template</td>
    <td id="tr1">Template</td>
  </tr>
  <tr id="spec1">
    <td id="tr">Template</td>
    <td id="tr1">Template</td>
  </tr>
  <tr id="spec">
    <td id="tr">Template</td>
    <td id="tr1">Template</td>
  </tr>
  <tr id="spec1">
    <td id="tr">Template</td>
    <td id="tr1">Template</td>
  </tr>
  <tr id="spec">
    <td id="tr">Template</td>
    <td id="tr1">Template</td>
  </tr>
  <tr id="spec1">
    <td id="tr">Template</td>
    <td id="tr1">Template</td>
  </tr>
  <tr id="spec">
    <td id="tr">Template</td>
    <td id="tr1">Template</td>
  </tr>
  <tr id="spec1">
    <td id="tr"></td>
    <td id="tr1">Template</td>
  </tr>
</table>

image; first launch from Chrome

Answer 1

您使用多个相同的ID，ID必须是唯一的，因此更改为课程，并且当您只有#spec0

时，您尝试应用id="spec"

.spec {
  background-color: #FFFFFF;
  width: 566px;
  border: 1px solid #ddd;
}
.spec1 {
  background-color: #F1F1F1;
  width: 566px;
  height: 20px;
}
#table {
  border-collapse: collapse;
  width: 566px;
  border: 1px solid #ddd;
  margin-top: 11px;
  position: static;
}
.tr {
  border: 1px solid #ddd;
  height: 10px;
  font-size: 11pt;
  text-align: right;
}
.tr1 {
  border: 1px solid #ddd;
  height: 10px;
  font-size: 11pt;
}

.tr3 {
  height: 10px;
  font-size: 11pt;
  border: 1px solid #ddd;
  text-align: left;
}

<table id="table">
  <tr class="spec">
    <th class="tr">Template</th>
    <th class="tr3">Template</th>
  </tr>
  <tr class="spec1">
    <td class="tr">Template</td>
    <td class="tr1">Template</td>
  </tr>
  <tr class="spec">
    <td class="tr">Template</td>
    <td class="tr1">Template</td>
  </tr>
  <tr class="spec1">
    <td class="tr">Template</td>
    <td class="tr1">Template</td>
  </tr>
  <tr class="spec">
    <td class="tr">Template</td>
    <td class="tr1">Template</td>
  </tr>
  <tr class="spec1">
    <td class="tr">Template</td>
    <td class="tr1">Template</td>
  </tr>
  <tr class="spec">
    <td class="tr">Template</td>
    <td class="tr1">Template</td>
  </tr>
  <tr class="spec1">
    <td class="tr">Template</td>
    <td class="tr1">Template</td>
  </tr>
  <tr class="spec">
    <td class="tr">Template</td>
    <td class="tr1">Template</td>
  </tr>
  <tr class="spec1">
    <td class="tr">Template</td>
    <td class="tr1">Template</td>
  </tr>
  <tr class="spec">
    <td class="tr">Template</td>
    <td class="tr1">Template</td>
  </tr>
  <tr class="spec1">
    <td class="tr"></td>
    <td class="tr1">Template</td>
  </tr>
</table>