0

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

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

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

无论如何 - 为了演示这里的问题是一个非常简单的 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 政策的大型企业客户打交道。

4

1 回答 1

1

所以...我把它放到 IE Developer Toolbar 中，这就是 DOM 的样子。

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

我确实发现，如果您使用 JavaScript 删除 malformed 中隐藏input的或其未命名的父元素table，它会突然再次正常工作。

input使用此信息，创建一个 JavaScript 例程将所有位于错误位置的隐藏 s 移动到有效位置将是一种解决方案（尽管如此 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 所遇到的困难......

于 2013-09-28T07:55:22.360 回答