IE 7 无效的表格 HTML 没有正确定位答案

【问题标题】：IE 7 invalid table HTML not positioning properlyIE 7 无效的表格 HTML 没有正确定位
【发布时间】：2013-09-28 15:55:22
【问题描述】：

我要问这个问题，只是因为我想更好地理解这个问题。

我正在处理一个页面，该页面包含一堆生成大量 HTML 表单的遗留 JSP 代码，并使用一个表格来保存可见的输入字段。但是，在许多情况下，JSP 会在 <table> 内呈现隐藏的输入，但不会在任何无效的 HTML 结构 <td> 内呈现。这些类型的 HTML 结构错误在这个页面中无处不在。

这个页面的 JSP 代码已经存在了大约 10 年，没有出现过这个无效 HTML 的问题，开发人员很清楚这个问题，但从来没有任何理由去修复它。现在我们正在尝试使页面看起来更现代，而我正在使用的东西之一是 position:fixed。

无论如何 - 为了演示这里的问题是一个非常简单的 HTML 页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html>
<head><style>.fixedTable { position: fixed; background-color:red; } </style></head>
<body>
  <!-- this table gets an invalidly placed hidden input tag outside of the row -->
  <table class="fixedTable" style="top:100px;left:100px;">
   <input type="hidden" name="value" value="test">
   <tr><td>Test 1</td></tr>
  </table>
  <!-- this table is properly structured -->
  <table class="fixedTable" style="top:130px;left:100px;">
   <tr><td><input type="hidden" name="value" value="test">Test 2</td></tr>
  </table>
</body>
</html>

所有浏览器（IE 7 除外）都显示 2 个小红框相互重叠，距顶部 100 像素，距左侧 100 像素。

IE 7 将第一个表（测试 1）的位置完全错误地放在页面的左上角。 IE 8 很好。

这是怎么回事？

好的 - 当然，我可以修复 HTML 结构 - 但我仍然想知道发生了什么，然后也许我可以找到一种解决方法，而无需重构大量的 JSP 代码。

为了增加混乱......

对样式做一点小改动：

.fixedTable td { position: relative }

现在文本“Test 1”出现在正确的位置...但红色背景仍在左上角...

这可能看起来很疯狂，但我们公司确实正式支持 IE 7，并且很大一部分人仍在使用它。不幸的是，我们与许多采用过时 IT 政策的大型企业客户打交道。

【问题讨论】：

标签： html internet-explorer css-position legacy-code

【解决方案1】：

所以...我把它放到 IE Developer Toolbar 和 this is what the DOM looks like.

显然，IE7 为隐藏的input 构造了一个未命名的父元素。我能够通过:first-child 选择器定位CSS 中的那个空元素；但是，我无法通过这样做来解决任何问题（除非您将其设置为position:absolute，它会使我的虚拟机上的 IE7 崩溃）。我不知道为什么它错误地将背景放在那里。

我发现如果你使用 JavaScript 删除隐藏的input 或其未命名的父元素在格式错误的table 中，它突然又可以正常工作了。

使用此信息，创建一个 JavaScript 例程将所有位于错误位置的隐藏 inputs 移动到有效位置将是一种解决方案（尽管如此 hacky...）。当然，记录例程的重要性将非常重要。此外，如果他们的 JavaScript 无法加载或被禁用，那么您需要扑灭一些火灾。

这是一个示例代码，向您展示了我上面提到的内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html>
<head>
<style>
.fixedTable { position: fixed; background-color:red; }
.malformed > *:first-child { background-color:blue; }
.fixedTable td { position: relative; }
</style>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#test").parent().remove();
});
</script>
</head>
<body>
  <!-- this table gets an invalidly placed hidden input tag outside of the row -->
  <table class="fixedTable malformed" style="top:100px;left:100px;">
    <input type="hidden" name="value" id="test" value="test">
    <tr><td>Test 1</td></tr>
  </table>
  <!-- this table is properly structured -->
  <table class="fixedTable" style="top:130px;left:100px;">
    <tr><td><input type="hidden" name="value" value="test">Test 2</td></tr>
  </table>
</body>
</html>

我希望其中的一些内容至少对您找出解决方案有所帮助！祝你好运！我完全同情继续支持 IE7 所遇到的困难......

【讨论】：

这是一个有用的答案。如果没有其他人给出任何进一步的答案（我仍然希望有一个不那么老套的解决方案） - 我会将其标记为已接受。但总的来说，在页面加载后移动 DOM 的想法可能会奏效。