IE上<p>标签对innerHTML包容支持度不够有关问题解决

IE下<p>标签对innerHTML包容支持度不够问题解决

?? 这两天遇到了一个问题，为了将日历控件与一个input type="text" 的框相对定位，所以将这个日历div用js加载到这个text框的父元素，而这个父元素是<p>标签。在IE下，日历js中，有innerHTML的地方报错了，错误信息是“未知的运行时错误”，而在FireFox下没有问题。在网上查了一下，知道是innerHTML在IE下支持不够，包容innerHTML的父元素的包容性有要求的。开始的时候，我还在考虑是不是日历js哪有错，但是其他地方也是调用同一个日历js文件，在IE下是没有问题的，所以问题不是出在日历js文件中，而应该是外层的元素对这个js有影响，所以才出这个错误。

之前的代码如下：

<div id="housecarDiv" id="housecarform"method="get"><p name="indate" id="houseCarIndate" /><div id="datepicker-houseCarIndate" style="z-index: 1000000; left: 30px; top: 70px;">……//日历的代码省略</div>//这里是用js将这个detapicker的div加到 input[name="indate"]所在的<p>标签中。</p><p><label>离店日期：<span></span></label><input type="text" name="outdate1" id="houseCarOutDate"disabled="disabled" /></p><%--<p><input type="submit" style="margin-left: 150px;cursor: pointer;" value="抢购"  name="submitButton"/> </p>--%><div name="outdate" value="${outDate}" /><input type="hidden" name="hotel" value="${houseCar.hotelId}" /><input type="hidden" name="plan" value="${houseCarRoom.roomTypeId}" /><input type="hidden" name="rateType" value="single" /><input type="hidden" name="searchFrom" value="${refererHost}" /></form></div>

?

将<p></p>包裹的内容用<ul><li>后就ok了，改后的代码如下：

<div id="housecarDiv" id="housecarform"method="get"><ul><li name="indate" id="houseCarIndate" /><div id="datepicker-houseCarIndate" style="z-index: 1000000; left: 30px; top: 70px;">……//日历的代码省略</div>//这里是用js将这个detapicker的div加到 input[name="indate"]所在的<li>标签中。?</li><li><label>离店日期：<span></span></label><input type="text" name="outdate1" id="houseCarOutDate"disabled="disabled" /></li><%--<p><input type="submit" style="margin-left: 150px;cursor: pointer;" value="抢购"  name="submitButton"/> </p>--%><li><div name="outdate" value="${outDate}" /><input type="hidden" name="hotel" value="${houseCar.hotelId}" /><input type="hidden" name="plan" value="${houseCarRoom.roomTypeId}" /><input type="hidden" name="rateType" value="single" /><input type="hidden" name="searchFrom" value="${refererHost}" /></form></div>

? 这个bug解决的时间比较长，花了好几个小时，最开始的时候我在calendar.js日历文件中debug,因为这个js是引用第三方的，很复杂，看了很久，找到问题在innerHTML上，但是基本上没有无从修改。另外，同一个js，在另外引用的地方，在IE里都是没有问题的，从这个可以看出，应该不是这个calendar.js内部的问题，而是包容它的外层元素影响了它，所以我就试着将<p>改为div，结果这个“未知的运行时错误”就没有了，在IE的左下角没有出现“！完成，但网页上有错误” ，只是因为日历本身也是div包裹的，所以位置有点不对，但是这个错误没有再现，就说明<p>标签导致calendar.js中的innerHTML一行报错。知道问题所在就好办了，避开div，span（因为这个div中其他地方也有使用，样式会有影响），所以将p所有的样式加到ul li上，将标签改完以后，就没报错了，并且定位也没有影响了，bug彻底解决了！