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

Question

提问by Michael

It seems I've stumbled on an annoying Internet Explorer 11layout 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
The element uses percentage-based padding, e.g., padding: 0 5%
A subelement adds text-decoration: underlinewhen the parent element is hovered over

该元素使用 display: table-cell
该元素使用基于百分比的填充，例如， padding: 0 5%
将text-decoration: underline鼠标悬停在父元素上时添加子元素

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-celland percentage-based padding?

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

Answer 1

采纳答案by nkmol

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 whythis 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 
{
    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).

为什么不？
这是因为百分比采用的是来自其父元素表格单元格的值。表格单元格确实采用了基于表格的百分比值。现在，当您只使用left-margin: 5%;. 它应该是空间的一半。这是因为它占用了表格单元格宽度的 10%。其中表格单元格宽度是表格宽度除以它的单元格（table width / table cell）。

So to fix that i did 5 times the amount of cells (5 * 2in 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

js小提琴

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

js小提琴

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 发送了错误报告。当您收到回复时让我们保持最新状态，我将不胜感激:)

Answer 2

回答by ioCron

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.

奇怪，没有人提到设置 table-layout:fixed; 这真的很重要，否则在 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

回答by tomasz86

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 transparentfor better compatibility with old IE which displays transparentin colour while rgbais rendered invalid and not displayed at all.

我使用rgba(0,0,0,0)而不是transparent为了与旧的 IE 更好地兼容，旧的 IEtransparent以彩色显示，而rgba被渲染为无效并且根本不显示。

Answer 4

回答by Web-X-Plorer

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

这些都是非常好的答案，并且媒体查询选项可以很好地识别仅存在此问题的 IE display: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-cellelement to where I wanted it to reside. Usually vertical-align doesn't do much to formatting, UNLESS it is in a table.

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

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 {line-height}根据 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.

此外，如果您希望它适用于 IE 9 及以下版本，我建议使用条件注释，将“ie”类添加到<html>标签，然后创建一个 IE9 样式表。谢天谢地，IE9 所需的样式相对相同。但我只通过 IE9 进行了测试，我不确定您对 IE8 和 IE7 的结果。

Answer 5

回答by Richard Tinkler

We had a similar scenariowhere 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 的相对填充值并很好地解决了我们的问题。

Answer 6

回答by Andreas

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

这可以通过像这样设置填充 css-rules 来“帮助”解决 ->

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 适用于 IE 10 及更高版本，因此此“解决方案”仅适用于 IE 9 及更低版本。

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

提问by Michael

采纳答案by nkmol

Use margin

使用保证金

jsFiddle

js小提琴

Use border

使用边框

jsFiddle

js小提琴

回答by ioCron

回答by tomasz86

回答by Web-X-Plorer

回答by Richard Tinkler

回答by Andreas

相关推荐

最近更新

标签