Question

我很新，很困惑。我正在尝试建立一个页面，位于这里：http://operation-rebuild.org/meet-the-staff/我无法弄清楚，对于我的生活，为什么某些表格单元显示出与其他表格单元格不同的1个像素。在Firefox上，第三个图像（金发）是1像素太宽，无法匹配标签“COORDINATOR”。在谷歌浏览器上，图像与前三张图像上的标签之间存在单个像素间隙。在最后一张图像上，没有这样的间隙，但标签本身是比图像短的像素。它们都使用相同的元素，所以我不明白是什么导致了差异或为什么它是特定于浏览器的。谁能说出发生了什么？

另外，只是旁注，我的所有图像周围似乎都有5px的填充。我不知道它来自哪里。这不是我的CSS，我已经搜索主题的样式表无济于事。我暂时通过将黑/白标签的边距设置为-5px来摆脱差距，但这令人沮丧。如果有更高级眼睛的人能发现错误我会很感激！

table,
th,
td {
  border: 0px solid #000;
  margin: 0;
  padding: 0;
}

table.no-spacing {
  border-spacing: 0;
}

#table1 {
  margin-bottom: 0;
}

.staff,
td,
th {
  padding: 5px;
  padding-top: 0px;
}

.stafftitle {
  text-align: center;
  margin-top: -5px;
  width: 201px;
  padding: 5px;
  background-color: #000;
  font-family: arial;
  font-size: 16px;
  color: #fff;
}

.staffname {
  font-size: 12px;
  color: #000;
  text-align: left;
  text-transform: uppercase;
  width: 203px;
  padding: 0px;
  margin-top: 0px;
}

<table class="no-spacing" cellspacing="0">
  <tr>
    <td><img class="alignnone size-medium wp-image-829" src="http://operation-rebuild.org/wp-content/uploads/2017/07/mesite1-218x300.png" alt="" width="218" height="300" /></td>
    <td><img class="alignnone size-medium wp-image-830" src="http://operation-rebuild.org/wp-content/uploads/2017/07/lexsite1-218x300.png" alt="" width="218" height="300" /></td>
    <td><img class="alignnone size-medium wp-image-827" src="http://operation-rebuild.org/wp-content/uploads/2017/07/taylorsite1-218x300.png" alt="" width="218" height="300" /></td>
    <td><img class="alignnone size-medium wp-image-828" src="http://operation-rebuild.org/wp-content/uploads/2017/07/kelseysite1-218x300.png" alt="" width="218" height="300" /></td>
  </tr>
  <div class="staff">
    <tr>
      <td>
        <div class="stafftitle">DIRECTOR</div>
      </td>
      <td>
        <div class="stafftitle">COORDINATOR</div>
      </td>
      <td>
        <div class="stafftitle">COORDINATOR</div>
      </td>
      <td>
        <div class="stafftitle">COORDINATOR</div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="staffname">Rebecca McGory</div>
      </td>
      <td>
        <div class="staffname">Alexis Nasta</div>
      </td>
      <td>
        <div class="staffname">Taylor McNeil</div>
      </td>
      <td>
        <div class="staffname">Kelsey Brown</div>
      </td>
    </tr>
</table>
</div>

单表格单元比其余单位像素短一个像素？

0 个答案: