web之家  

长期以来,我一直以为form表单是放数据的,table、tr、td是负责HTML页面显示布局的,他们之间不会互相影响。但是今天出现了这样的一个问题。同样的代码使用jQuery的serialize方法在IE8和IE9上执行是可以获取到form表单数据的,而在IE11上就不行。

         经过多次试验、比较、测试发现是因为form标签和table交叉的原因。比如在以下的情况是执行失败的:

         <table>

               <form>

                           <tr>

                                  <td>姓名</td>

                                  <td><input name="name" type="text"/></td>

                           </tr>

               </form>

         </table>

         而以下的方式是成功的:  

 

         <form>

               <table>

                           <tr>

                                  <td>姓名</td>

                                  <td><input name="name" type="text"/></td>

                           </tr>

               </table>

         </form>

        在网上也查了下资料,但是貌似没有讲的非常清晰的。但是可以肯定的是这是因为各个版本和类型的浏览器对HTML文档解析的规则是不同的,比如IE浏览器版本越高其HTML格式要求越严格。在以上情景中form和table实际上是一个层次的标签,而第一种方式似乎使用form割裂了table的完整性,当然了这也是我自己瞎分析的。这里写出来防止大家再犯同样的错误,这种错误有时候会让人莫名其妙,如果不知道这个岔,解决起来也会浪费时间。

posted on 2020-12-23 17:23  路修远而求索  阅读(286)  评论(0编辑  收藏  举报