問題與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>元素從我的演示，因爲它是風馬牛不相及的箭頭定位的問題。