Question

我尝试在<th>上添加几个图标，方法是将position: relative添加到position，然后使用::after position: absolute将<th>伪元素添加到* {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和Firefox，但不适用于Internet Explorer。

以下是演示此问题的代码段（仅在Internet Explorer中可重现，我的版本11）：

<th>

position

当我在谷歌浏览器中运行时，我得到了预期的输出：

Google Chrome中的所有图标都在中间完美对齐。

然而，在Internet Explorer中，问题是，当所有position: relative元素具有不同的内容时，所有Content元素都采用正确的高度，但定位却搞砸了。

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

注1：我还调查了IE vertical centering bug with table-cell parent and absolutely positioned pseudo-element，这要求我使用其他元素并提供public MainWindow() { InitializeComponent(); Window win = new Window() { Width = 100, Height = 100 }; win.Content = new UserControl1(); win.Show(); }，但在我的情况下这不可能作为我的HTML是固定的，不能改变。它由企业应用程序生成，我无法控制。

注2：由于我已经知道每个元素的高度，我使用的是负边距技术。

如果可能，请告诉我。

Answer 1

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

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

Answer 2

好的，我一直在尝试使用不同的方法来使用::after并正确定位它，看起来没有一种方法在Internet Explorer 11中有效。所以最后我决定使用三个单独的图像进行背景和定位它根据需要。

如果有人使用它，请点击我的更新代码段。

＆＃13;

* {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;}

＆＃13;

<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>

＆＃13;

预览

加分：关于这一点的好处是，我还使用了名为CSS background-position edge offsets的东西，这有助于我实现以下内容，我使用right: 5px;进行了我的代码段中的::after个伪元素。好吧，我想给我的箭头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。

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

2 个答案: