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

Question

我试图通过把他们position: relative增加对<th>几个图标，然后position使用position: absolute的<th>内荷兰国际集团的图标为::after伪元素，并给予图标作为背景（因为他们是精灵）。这适用于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>

当我在谷歌浏览器上运行，我得到预期输出：

全部•谷歌浏览器中的图标在中间完美对齐。

然而，在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中没有任何方法。所以最后我决定使用三个单独的图像作为背景并根据需要进行定位。

这是我更新的片段，如果有人会使用它。

* {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;佛我的代码片段中包含伪元素。好了，我想给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的完整体验。

注：这仅仅是我想要的东西替代，而我认为这是一个黑客作业。我将等到真实解决方案使用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>元素从我的演示，因为它是风马牛不相及的箭头定位的问题。