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

Question

我试图在 <th> 上添加一些图标，方法是将它们放在 position: relative 上，然后 position 使用 [=16] 将图标作为 ::after 伪元素=] 在 <th> 中，并将图标作为背景（因为它们是精灵）。这在 Google Chrome 和 Firefox 中完美运行，但在 Internet Explorer 中运行不佳。

这是演示问题的片段（仅在 Internet Explorer 中可重现，我的版本 11）：

* {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 中运行时，我得到了预期的输出：

GoogleChrome中的所有图标完全居中对齐。

然而，在 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 并正确定位它，看起来 none 的方法在 Internet Explorer 11 中有效。所以最后我决定使用三个单独的方法背景图像并根据需要定位。

这是我更新后的代码片段，如果有人会用的话。

* {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 伪元素。好吧，我想为我的箭头提供 5px 填充，以免卡在 table 的边缘，我有以下理由/理由：

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

通过添加额外的位：

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

上面的CSS将background-position的右边偏移了5px的一个跨度，字面意思就是right-5px的计算。很酷，不是吗？

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

Note: This is just an alternative to what I wanted, and I would consider this as a hack-job. I am going to wait till I get a real solution to use the position and CSS Sprites.

Answer 2

尽管我之前在聊天中说过，但这是我争论的内容。它仍然没有使用 sprite 和定位，但它可能对某人 something/helpful 有价值：

如果你只是想要箭头，你可以使用元素而不是像图像这样的替换内容。除了不使用精灵外，它也不使用任何 position 属性。它仍然很难看，并且包含更多复杂的标记，但至少它在 IE11 中有效（您可以根据需要调整边距）并且您可以 click/interact 使用箭头比作为背景图像更容易：

.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> 元素，因为它与箭头定位问题无关。

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

Issue with IE11 multi-height TH and positioning of pseudo elements

html

css

internet-explorer

internet-explorer-11