jsFiddle

Question

我似乎偶然发现了一个恼人的 Internet Explorer 11 布局错误。（呃，我以为这些日子已经过去了。）

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

这似乎是因为一个令人难以置信的特定CSS场景而出现的：

元素使用display: table-cell
元素使用基于百分比的填充，例如padding: 0 5%
当父元素悬停在

text-decoration: underline

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

这似乎是一个IE11错误，但我想知道：在没有放弃display: table-cell和基于百分比的填充的情况下，有人能想到解决此问题的方法吗？

Answer 1

再一个看起来很不寻常的IE11问题。我发现百分比填充甚至没有计算，也没有在layout中应用。但是，文本仍然根据填充百分比填充。所以我假设文本是用填充定位的，但是在定位之后，百分比填充被“禁用”。

我无法告诉你为什么会发生这种情况。但如果您真的想要解决这些问题，可能需要使用这些快速修复程序。

<小时/>

使用保证金

因为百分比错误仅发生在表格单元格的填充上，所以实际上可以在跨度本身上使用边距。

span 
{
    margin-left: 10%;
}

并且当然重置边的填充：

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

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

为什么不呢？
这是因为百分比取值是它的父元素table-cell的值。表格单元格确实根据表格获取百分比值。现在，当你只使用left-margin: 5%;时。它应该是应有的一半空间。这是因为它占用了表格单元宽度的10％。表格单元格宽度是由其单元格（table width / table cell）划分的表格宽度。

所以要确定我做了5倍的细胞数量（在这种情况下5 * 2），这将导致正确的百分比。

但是，当您想要添加更多单元格时，这不是动态的。

jsFiddle

<小时/>

使用边框

在重置填充之前使用其位置为“保留”的边框。

保留边框

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

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

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

现在请注意，布局中仍然没有填充。一旦分配了一个属性，在填充确定之前没有计算（同时文本位置被确定），将重新计算位置。

jsFiddle

我希望其中一个快速修复功能适合您。

我看到你发了bug report to MS。当你得到答复时，让我们保持最新，我将不胜感激：）

Answer 2

奇怪，没人提到设置表格布局：固定;它非常重要，否则填充/宽度不能在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>

Answer 3

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

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

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

我使用rgba(0,0,0,0)代替transparent，以便更好地兼容显示transparent彩色的旧IE，而rgba呈现无效且根本不显示。

Answer 4

我们有similar scenario，上述解决方案均无效。

相反，我们会在页面加载后为受影响的div的宽度设置动画：

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

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

Answer 5

这可以是＆＃34;有帮助的＆＃34;通过设置像这样的paddding css-rules解决 - ＆gt;

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

记住只为IE设置它，因为它可以使所有普通浏览器的行为像迪斯科舞厅。

编辑：Flexbox适用于IE 10及更高版本，因此这个＆＃34;解决方案＆＃34;仅在9及以下时需要。

Answer 6

这些都是非常好的答案，媒体查询选项适用于仅识别出display:table-cell

出现此问题的IE

我所做的我发现效果很好的是使用vertical-align作为将display:table-cell元素中包含的文本指向我希望它驻留的地方的好方法。通常，vertical-align对格式化没有太大作用，除非它在表格中。

这是我简化的HTML：

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

这是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;}
}

您可能还需要调整li a:hover {line-height}，具体取决于CSS中这些元素的内容

另外，如果你想让它适用于IE 9及以下版本，我建议使用条件注释添加＆＃34; ie＆＃34;将类添加到<html>标记，然后创建IE9样式表。值得庆幸的是，IE9所需的样式相对相同。但我只通过IE9测试，我不确定你的IE8和IE7的结果。

我如何解决与表格单元格，文本修饰和填充相关的IE11布局错误？

6 个答案:

使用保证金

jsFiddle

使用边框

jsFiddle