IE11 多高度 TH 和伪元素定位问题

Question

我正在尝试在<th> 上添加几个图标，方法是将它们放入position: relative，然后将图标作为::after 伪元素在<th> 中使用position: absolute，并将图标作为背景（因为它们是精灵）。这在 Google Chrome 和 Firefox 中完美运行，但在 Internet Explorer 中却不行。

这是演示问题的 sn-p（只能在我的版本 11 的 Internet Explorer 中重现）：

* {font-family: 'Segoe UI';}
.arrow {border: 1px solid #ccc; padding: 5px; line-height: 1; background-color: #00f; color: #fff; position: relative; cursor: pointer; padding-right: 20px;}
.arrow-normal::after {width: 9px; height: 12px; margin-top: -6px;}
.arrow-up::after {width: 9px; height: 6px; margin-top: -3px;}
.arrow-down::after {width: 9px; height: 6px; margin-top: -3px; background-position: 0 -6px;}
.arrow::after {
  top: 50%;
  position: absolute;
  right: 5px;
  content: ' ';
  display: block;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAnZJREFUeNpsk99rUmEYx1/l+Hvmj8HwQgQvvHKS0LqJQCOIMnTmqOb8UTfdDjb/iYneDAaCIhgSE/NnTOZNMAapkCFYbMEIuiswaHPq5tHj6XlsR3TsCw/nfR/e9/M+vw4RCAQEDWW325+0Wq0fDofDKhKJyMLCwthYlh1btVolpVKJHB4eklgsdlur1X4LBALPCoUCSSaTJJvNkgnM6XTaz0FwkYVP2+VyPRIKhTPASqVCDg4OSCQSWZqfn/8F11h4uLe5ufk8l8v9B6JWVlacl5eXF+yUOp3OOfjHUA7YbDbJzs7Oklqt/o0wziiKotfX11fL5TIha2trL/v9Ps3eIIB2fT7fMgeMx+P35+bm/kzDpozZ2Njw8xqNxkeDwXC32+22eSByJQTKZLJbJycnn81m80P0QRneQcp2uVz+F7aTsyjIUKbX65s8t9st1Gg0gsFgwE7BCLKhvryzs7MBREajv16vU0qlUsDn81kOeHV2vO/1egxlMpkYm82GL5DrwvpBRAy3h1qNisXigGvktCAgsri4OKJgVEqwuAOOzrUzLFyUSySSL7B+jI6tra14Pp9/ClGeQmQzKUN0MqPR+JVsb2/7R6MRc1NThsNhP5FIvOCasre390ChUJze1BRMOxgMvsGRIdFodBUinOk0TdO9VCrlgBmbjA08QPb39++pVKqZTkNNmVAo9Ap+CsKXSqU4sCmYfA9ALjB8/GYymdWjo6MPYrF4khY0iFit1sru7u4yDDZCsXE0wF57vd637Xab8NGJ0Fqt9h4idcOln+l02nV8fDwDQ2HnEWqxWD7BGZtOp/seDof9Ho8niTDM4p8AAwB6jpihgDknYAAAAABJRU5ErkJggg==");
}

<table>
  <thead>
    <tr>
      <th class="arrow arrow-normal">Two Line<br />Column</th>
      <th class="arrow arrow-up">Single</th>
      <th class="arrow arrow-down">Three<br />Line<br />Column</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Item 1</td>
      <td>Item 2</td>
      <td>Item 3</td>
    </tr>
  </tbody>
</table>

当我在 Google Chrome 中运行它时，我得到了预期的输出：

谷歌浏览器中的所有图标都在中间完美对齐。

然而，在 Internet Explorer 中，问题在于，当所有 <th> 元素具有不同的内容时，它们的高度都正确，但定位却混乱了。

我看到的是，在 Internet Explorer 中，高度计算正确，但对于 position，调整表格之前的初始高度被考虑在内。有什么办法可以解决这个问题吗？

---

注意 1： 我还研究了IE vertical centering bug with table-cell parent and absolutely positioned pseudo-element，这需要我使用另一个元素并提供position: relative，但这在我的情况下是不可能的，因为我的 HTML 是固定的并且可以不能改变。它是由我无法控制的企业应用程序生成的。

注意2：因为我已经知道每个元素的高度，所以我使用负边距技术。

如果可以，请告诉我。

Answer 1

好的，我一直在尝试不同的方法来使用 ::after 并正确定位它，看起来这些方法在 Internet Explorer 11 中都不起作用。所以最后我决定使用三个单独的图像作为背景并将其定位为必填。

如果有人会使用，这是我更新的 sn-p。

* {font-family: 'Segoe UI';}
.arrow {border: 1px solid #ccc; padding: 5px; line-height: 1; color: #fff; cursor: pointer; padding-right: 20px;}
.arrow-normal {background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAMCAYAAACwXJejAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAA6klEQVQoU3WQzQqCQBSFB4IW9VKtosCaUKwQbOkL+CBuRHAnLlz4BG16BRci7spNgeJGysofou41jTT64DLMOefOzB3yDcMw0ziO95TSUS21AWN2AZ4ALGeO48a19YZl2cUdwEBDmqaXT1AQhFWWZUXttYATr6IoUuI4zg66zmEYHqMoOjWFe9TRJzzP92VZHkqSNOgW6ugT27Z7nuf1/xX6xHXdLVwfF0URdOqAuu/7W6IoyuYBVC/tUJZlbhjGsppQ1/U1dLYmzPP8ZlnWvAo0aJrGw1fcMIDrT6BBVVWaJElgmuaklgBCXtrc+nqGz49JAAAAAElFTkSuQmCC") right 5px center no-repeat #00f;}
.arrow-up {background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAGCAYAAAARx7TFAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAfklEQVQYV2NABj4+Pp6vX7++6+/v7wAVQgVACd/PQPAfCIDUp+DgYDeoFAQEBQUFfAcCkAIY+PLly2e4wqioqPAfP378gsqhAKCJX2NjY/0Zzp07txeo69OLFy+evHz58ikMg/ggcZA8Q2hoKFtxcTF3WloaFzoGiYeGhrIBANcmc5DiPaghAAAAAElFTkSuQmCC") right 5px center no-repeat #00f;}
.arrow-down {background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAGCAYAAAARx7TFAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAfUlEQVQYV2NYtWoV85UrV9hwYZA8w6VLl3b8////9a9fv+6j4Xsg8WvXru1g6O/vj/sLBEABDPD79++fCxYsCGMAgZkzZ0YAdf6CyoHBz58/vy1btswPrAAGpk2bFvrjx49vIAUgGkMBDEyZMsX/w4cP9xctWuQBFQICBgYAx8mG6/gP36QAAAAASUVORK5CYII=") right 5px center no-repeat #00f;}

<table>
  <thead>
    <tr>
      <th class="arrow arrow-normal">Two Line<br />Column</th>
      <th class="arrow arrow-up">Single</th>
      <th class="arrow arrow-down">Three<br />Line<br />Column</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Item 1</td>
      <td>Item 2</td>
      <td>Item 3</td>
    </tr>
  </tbody>
</table>

预览

红利：关于这个的好处是，我还使用了一个叫做 CSS background-position edge offsets 的东西，它可以帮助我实现以下内容，我使用 right: 5px; 代替 ::after 伪我的 sn-p 中的元素。好吧，我想为我的箭头提供5px 填充，以免卡在桌子边缘，我有以下原因/理由：

• 我懒得使用 Photoshop CS3 为图像赋予填充权并重新创建 data:// URI。
• 这是不对的，因为图像不应该内置填充。如果它应该用在左侧怎么办？

通过添加额外的位：

.class {background: url("image.png") right 5px center no-repeat;}

上面的 CSS 将background-position 的右侧偏移为5px 的跨度，这就像right-5px 计算。很酷，不是吗？

我在博客文章中以Challenge: Internet Explorer Table Cells & Positioning Nightmare & Alternatives 的身份介绍了完整的体验。

注意：这只是我想要的替代品，我认为这是一个 hack-job。我会等到我得到真正的解决方案来使用position 和 CSS Sprites。

Answer 2

尽管我之前在聊天中说过，这就是我争吵的内容。它仍然没有使用精灵和定位，但它可能值得/对某人有所帮助：

如果你只是想要箭头，你可以使用元素而不是像图片这样的替换内容。除了不使用精灵之外，它也不使用任何position 属性。它仍然很丑，并且包含更复杂的标记，但至少它可以在 IE11 中使用（您可以根据需要调整边距）并且您可以比背景图像更轻松地单击/与箭头交互：

.arrow {
    border: 1px solid #ccc;
    padding: 5px;
    line-height: 1;
    background-color: #00f;
    color: #fff;
    cursor: pointer;
    padding-right: 20px;
}
.arrow > p {
    display: inline-block;
    margin: 0;
}
.arrow:last-child > p:last-child {
    margin: 16px 0;
}
.arrow-up {
    border-bottom: 5px solid white;
    margin-left: 5px;
}
.arrow-down {
    border-top: 5px solid white;
}
*[class^="arrow-"] {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}

<table>
    <thead>
        <tr>
            <th class="arrow">
                <p>Two Line
                    <br />Column</p>
                <p style="margin: 0;"><span class="arrow-up"></span>
                   <br>&nbsp;<span class="arrow-down"></span></p>
            </th>
            <th class="arrow">Single<span class="arrow-up"></span></th>
            <th class="arrow">
                <p>Three
                    <br />Line
                    <br />Column</p>
                <p class="arrow-down"></p>
            </th>
        </tr>
    </thead>
</table>

我从演示中删除了 <tbody> 元素，因为它与箭头定位问题无关。