IE8中的表错误（带有repro案例） [英] Table bug in IE8 (complete with repro case)
问题描述
我在Internet Explorer 8中发现了一个错误：当单元格内容发生变化时，表格单元格正在改变它们的宽度。以下是完整的复制案例：
< style type =" text / css">
#buggedTable
{
table-layout：fixed;
border-collapse：collapse;
边框：1px纯黑色;
宽度：100％;
}
#buggedTable td，
{
border：1px solid black;
溢出：隐藏;
white-space：nowrap;
}
#buggedTable td>输入
{
max-width：100％;
}
< / style>
...
< table id =" buggedTable">
< colgroup>
< col style =" width：100px;" />
< col style =" width：100px;" />
< col style =" width：100px;" />
< col style =" width：auto;" />
< / colgroup>
< thead>
< tr>
< th> Col1< / th>
< th> Col2< / th>
< th> Col3< / th>
< th> Col4< / th>
< / tr>
< / thead>
< tbody>
< tr>
< td>值1-1< / td>
< td>值1-2< / td>
< td>值1-3< / td>
< td>值1-4< / td>
< / tr>
< tr>
< td>值2-1< / td>
< td>价值2-2< / td>
< td>值2-3< / td>
< td>值2-4< / td>
< / tr>
< tr>
< td>值3-1< / td>
< td>值3-2< / td>
< td>值3-3< / td>
< td>值3-4< / td>
< / tr>
< tr>
< td>值4-1< / td>
< td>价值4-2< / td>
< td>值4-3< / td>
< td>值4-4< / td>
< / tr>
< tr>
< td>值5-1< / td>
< td>值5-2< / td>
< td>值5-3< / td>
< td>价值5-4< / td>
< / tr>
< / tbody>
< / table>
...
< script type =" text / javascript">
$（function（）{
$（" #buggedTable td"）。toggle（
function（）{
var el = $ （this）;
var oldValue = el.text（）;
el.data（" oldValue"，oldValue）;
el.empty（）;
el.append（$（"< input type ='text'value ='" + oldValue +"'/>"））;
}，
function（）{
var el = $（this）;
el.empty（）;
el.text（el.data（" oldValue"））;
}
）;
}）;
< / script>
这个例子是我正在研究的类似Excel的网格的简化版本。是的，这个例子使用jQuery，但我不认为这是jQuery的问题（并且微软仍然支持jQuery）。当用户单击一个单元格时，单元格的内容将放在一个输入元素中，然后将其插入到单元格中。当用户再次单击时，单元格将恢复为其先前的值。这是发生错误的时候。使用IE Dev工具检查页面，该列的宽度减少3px。可能并非巧合，这正是水平衬垫和边框占据多少空间。根据IE，单元格上没有样式属性发生变化，但它确实报告它的布局宽度已经改变了3px，没有明显的原因。请注意，表格单元格具有固定宽度（最后一个除外），表格布局是固定的，并且该溢出是隐藏的，因此无论单元格内容发生什么情况，表格单元格都不应调整大小。他们绝对不应该像他们一样失去3px。我也尝试将单元格边框和填充清零，但仍然会发生错误，但它只会丢失1px的宽度。
这也是随机发生的，每次都不会发生。通常我可以随机点击并让它在几秒钟内发生，因此对于我正在尝试做的事情来说，这通常是一个严重的问题。它也不会立即显现出来。有时单元格*会*显示正确的宽度，但单击一个完全不相关的单元格（意味着一个不与单元格接壤的单元格）会突然导致另一个单元格缩小3px。
任何人有什么想法？
哦，我还应该注意，我无法使用IE将宽度修复回正确的值开发者工具。如果我尝试在有问题的单元格上将宽度从97px更改回100px，则忽略宽度。
I have found a bug in Internet Explorer 8: table cells are changing their width for no apparent reason when the cell contents are changed. Following is a full repro case:
<style type="text/css">
#buggedTable
{
table-layout: fixed;
border-collapse: collapse;
border: 1px solid black;
width: 100%;
}
#buggedTable td, th
{
border: 1px solid black;
overflow: hidden;
white-space: nowrap;
}
#buggedTable td > input
{
max-width: 100%;
}
</style>
...
<table id="buggedTable">
<colgroup>
<col style="width: 100px;" />
<col style="width: 100px;" />
<col style="width: 100px;" />
<col style="width: auto;" />
</colgroup>
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Value 1-1</td>
<td>Value 1-2</td>
<td>Value 1-3</td>
<td>Value 1-4</td>
</tr>
<tr>
<td>Value 2-1</td>
<td>Value 2-2</td>
<td>Value 2-3</td>
<td>Value 2-4</td>
</tr>
<tr>
<td>Value 3-1</td>
<td>Value 3-2</td>
<td>Value 3-3</td>
<td>Value 3-4</td>
</tr>
<tr>
<td>Value 4-1</td>
<td>Value 4-2</td>
<td>Value 4-3</td>
<td>Value 4-4</td>
</tr>
<tr>
<td>Value 5-1</td>
<td>Value 5-2</td>
<td>Value 5-3</td>
<td>Value 5-4</td>
</tr>
</tbody>
</table>
...
<script type="text/javascript">
$(function() {
$("#buggedTable td").toggle(
function() {
var el = $(this);
var oldValue = el.text();
el.data("oldValue", oldValue);
el.empty();
el.append($("<input type='text' value='" + oldValue + "' />"));
},
function() {
var el = $(this);
el.empty();
el.text(el.data("oldValue"));
}
);
});
</script>
This example is a simplified version of the Excel-like grid I'm working on. Yes, this example uses jQuery, but I do not believe this to be a problem with jQuery (and jQuery is supported by Microsoft anyway). When a user clicks a cell, the cell's contents are placed in an input element, which is then inserted into the cell. When the user clicks again, the cell is restored to its previous value. This is when the bug occurs. Examining the page with the IE Dev tools, the column loses 3px off its width. Probably not coincidentally, this is exactly how much space the horizontal padding and border occupies. According to IE, no style properties have changed on the cell, but it does report that it's layout width has changed by 3px for no apparent reason. Note that the table cells are given fixed widths (except the last one), that table layout is fixed, and that overflow is hidden, so table cells should not resize no matter what happens to the contents of the cell. They definitely shouldn't lose 3px like they are. I also tried zeroing out the cell border and padding, but the bug still occurs, but it only loses 1px off the width.
Also, this occurs randomly, it does not happen every time. Usually I can click around randomly and get it to occur within a few seconds, so it's often enough that it's a serious problem for what I'm trying to do. It also doesn't always manifest itself immediately. Sometimes a cell will *appear* to have the correct width, but clicking on a completely unrelated cell (meaning one that is not bordering the cell) will suddenly cause the other cell to shrink by 3px.
Anyone have any ideas?
Oh, I should also note that I cannot fix the width back to the correct value using the IE Developer tools. If I try to change the width from 97px back to 100px on a bugged cell, the width is ignored.
这篇关于IE8中的表错误（带有repro案例）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
