我如何处理与表单元格、文本修饰和填充有关的IE11布局错误?

It seems I've stumbled on an annoying Internet Explorer 11 layout bug. (Ugh, I thought these days were behind us.)

我似乎偶然发现了一个烦人的Internet Explorer 11布局错误。(唉，我还以为这些日子已经过去了呢。)

In the following example, the padding on the right table cell disappears when you hover over it in IE11: http://jsfiddle.net/xx4Z4/

在下面的示例中，当您在IE11中悬停在右边的表单元格上时，右边的填充将消失:http://jsfiddle.net/xx4Z4/

This seems to arise because of an incredibly specific CSS scenario:

这似乎是由于一个非常特殊的CSS场景:

• The element uses display: table-cell
• 元素使用display: table-cell。
• The element uses percentage-based padding, e.g., padding: 0 5%
• 元素使用基于百分比的填充，例如，填充:0 5%
• A subelement adds text-decoration: underline when the parent element is hovered over
• 子元素添加文本修饰:在父元素悬空时下划线

If you change any of those three things, the problem goes away.

如果你改变这三件事中的任何一件，问题就会消失。

This seems to be an IE11 bug, but I'm wondering: Can anyone think of a workaround for this problem without abandoning display: table-cell and percentage-based padding?

这似乎是一个IE11的bug，但我在想:有没有人能想出一个解决这个问题的办法，而又不放弃显示:表单元格和基于百分比的填充?

6 个解决方案

#1

Again a IE11 problem that seems so unusual. I see that the percentage padding is not even calculated and is not applied in the layout. However the text is still padded according to the padding percentage. So i would assume the text is positioned with the padding but after the positioning the percentage padding is "disabled".

这又是一个很不寻常的IE11问题。我看到百分比填充甚至没有计算，也没有应用到布局中。但是，文本仍然根据填充百分比填充。因此，我假设文本是用填充来定位的，但是在定位之后，百分比填充被“禁用”。

I can't tell you why this happens. But if you really want to fix these you might want to use these quick fixes.

我不能告诉你为什么会这样。但是如果你真的想修复这些，你可能需要使用这些快速修复。

---

Use margin

Because the percentage bug only occurs on the padding of a table-cell, you can actually use a margin on the span itself.

因为百分比错误只发生在表单元格的填充上，所以实际上可以在span本身上使用空白。

span 
{
    margin-left: 10%;
}

and ofcourse reset the padding of the sides:

当然还要重新设置侧边的填充:

div.table-cell {
    display: table-cell;
    padding: 20px 0;
}

This "solution" is not as dynamic as with percentage padding on the table-cell itself.

这个“解决方案”并不像表单元格本身的百分比填充那样具有动态性。

Why not?
It's because the percentage takes is value from it's parent element, the table-cell. Where as the table-cell did take it's percentage value based on the tabel. Now when you would just use left-margin: 5%;. It would be half of the space as it should be. This is because it take the 10% on the table-cell width. Where the table-cell width is table width devided by its cells(table width / table cell).

为什么不呢?这是因为百分比是从它的父元素表单元格中获取的值。在表格单元格中，它的百分比值是基于表格的。当你使用左边界时，5%它应该是空间的一半。这是因为它占用了表单元格宽度的10%。表-单元格宽度由其单元格(表宽/表单元格)偏移。

So to fix that i did 5 times the amount of cells (5 * 2 in this case), which would result in the right percentage.

为了解决这个问题，我做了5倍的计算单元数(在这种情况下是5 * 2)这就得到了正确的百分比。

However this is not dynamic when you want to add more cells.

但是，当您希望添加更多单元时，这不是动态的。

jsFiddle

---

Use border

Use border which its position is "reserved" before the padding is resetted.

使用它的位置被“保留”的边界在填充被重新设置之前。

Reserved border

保留边界

span 
{
     border-bottom: 1px solid transparent;   
}

Change property that doesn't need re-calculation of position; color

改变不需要重新计算位置的属性;颜色

div.table-cell-bug:hover span 
{
    border-bottom-color: black; 
}

Now note that there will still be no padding in the layout. As soon as a property is assigned which has not been calculated before the padding did reset(the same time the text position is determed) the positions will be re-calculated.

现在注意，布局中仍然没有填充。一旦一个属性被分配，而这个属性在填充重置之前还没有被计算过(在确定文本位置的同时)，这个位置将被重新计算。

jsFiddle

---

I hope one of these quick fixes work for you.

我希望这些快速的修复对你有用。

I see you sended a bug report to MS. Keep us up-to-date when you get a reply, i would appreciate it :)

我看到你给MS.发了一份bug报告，让我们及时收到回复，我将非常感激:

#2

Strange, no one mentioned to set table-layout:fixed; It's really important, otherwise the padding/width won't be calculated correctly on IE (and some other weird side-effects, depending on the use case), especially when you are using images inside it.

奇怪的是，没有人提到设置表格布局:固定;这非常重要，否则在IE上不能正确计算填充/宽度(以及其他一些奇怪的副作用，取决于用例)，特别是当您在IE中使用图像时。

<style>
  .table { display:table; table-layout:fixed; }
  .table-cell { display:table-cell; }
</style>

<div class="table">
  <div class="table-cell"></div>
  <div class="table-cell"></div>
  <div class="table-cell"></div>
</div>

#3

Adding invisible top and bottom borders seems to fix the problem.

增加不可见的顶部和底部边框似乎可以解决这个问题。

a {
  border: solid rgba(0,0,0,0);
  border-width: thin 0;
}

This prevents the anchors from moving on hover or focus.

这可以防止锚点在悬停或焦点上移动。

I use rgba(0,0,0,0) instead of transparent for better compatibility with old IE which displays transparent in colour while rgba is rendered invalid and not displayed at all.

我使用rgba(0,0,0,0,0,0,0)而不是透明的，以更好地兼容旧IE，后者显示透明的颜色，而rgba被渲染无效，根本不显示。

#4

We had a similar scenario where none of the solutions above worked.

我们有一个类似的场景，上面的解决方案都不起作用。

Instead we animate the width of our affected div after the page has loaded:

相反，在页面加载之后，我们对受影响的div的宽度进行动画处理:

if (!!navigator.userAgent.match(/Trident\/7\./)){
            $("#karina-rosner2").animate({'width': '20.1%'},1);     
            $("#karina-rosner2").animate({'width': '20%'},1);   
}

This forces IE11 to recalculate the div's relative padding value and solved our problem well.

这迫使IE11重新计算div的相对填充值，并很好地解决了我们的问题。

#5

This can be "helpfully" solved by setting the paddding css-rules like this ->

这可以通过设置像这个->这样的css规则来“帮助”解决。

element:hover,
        element:active,
        element:focus  {
            // padding example
            padding-left: 1.5%;
        }

Rememeber to set this only for IE since it can make all normal browser behave like a disco.

记住，这仅仅是为了IE，因为它可以使所有正常的浏览器表现得像一个迪斯科。

EDIT: Flexbox works for IE 10 and above so this "solution" is only needed for ie 9 and below.

编辑:Flexbox适用于ie10及以上版本，因此此“解决方案”只适用于ie9及以下版本。

#6

These are all really good answers, and the media query option works well to identify only IE which has this problem with display:table-cell

这些都是很好的答案，而media query选项可以很好地识别只有显示有问题的IE:table-cell

What I did that I found worked well was employ vertical-align as a great way to direct the text contained within the display:table-cell element to where I wanted it to reside. Usually vertical-align doesn't do much to formatting, UNLESS it is in a table.

我所做的是，我发现它工作得很好，使用垂直对齐作为一种很好的方式来将显示中包含的文本:table-cell元素定向到我希望它驻留的位置。通常垂直对齐对格式化没有多大作用，除非它在表中。

Here is my simplified HTML:

这是我的简化HTML:

<li id="table-cell-element">
   <a href="#">
      <img src="event.png"/>
      <small>Register for Event</small>
   </a>
</li>

And here is the CSS:

这是CSS:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    li {vertical-align:middle; display:table-cell; width:15%; font-size:1.2em; line-height:1.2em; padding:2%; margin:0;} 
    li a {display:inline-block;} 
    li img {display:inline-block; vertical-align:middle; padding-right:5px; float:left; max-with:30px;}
    small {display:block; font-size:60%; font-weight:bold; color:#333;}
}

You may also have to adjust the li a:hover {line-height} depending on what is in your CSS for those elements

您还可能需要调整li a:hover{行高度}取决于您的CSS中那些元素的内容。

Also, if you want this to work for IE 9 and below I suggest using conditional comments that add an "ie" class to the <html> tag and then create an IE9 style sheet. Thankfully the styling required for IE9 is relatively the same. But I only tested through IE9 and I am uncertain of your results for IE8 and IE7.

另外，如果您想让它适用于IE9和以下版本，我建议使用条件注释，将“IE”类添加到标记中，然后创建一个IE9样式表。值得庆幸的是，IE9所需的样式相对来说是相同的。但是我只测试了IE9，我不确定你对IE8和IE7的结果。