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" class="dateForm clearfix">
				<form action="/hotelbooking/showFillOrder.action" id="housecarform"
					method="get">
					
						<p class="first">
							请选择日期
						</p>
						<p>
							<label>
								入住日期：
								<span></span>
							</label>
							<input type="text" name="indate" id="houseCarIndate" />

<div id="datepicker-houseCarIndate" class="datepicker" 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 class="yuding">
								<button name="submitButton">
									预定
								</button>
							</div>
						
					
					<input type="hidden" 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" class="dateForm clearfix">
				<form action="/hotelbooking/showFillOrder.action" id="housecarform"
					method="get">
					<ul>
						<li class="first">

							请选择日期
						</li>
						<li>

							<label>
								入住日期：
								<span></span>
							</label>
							<input type="text" name="indate" id="houseCarIndate" />
<div id="datepicker-houseCarIndate" class="datepicker" 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 class="yuding">
								<button name="submitButton">
									预定
								</button>
							</div>
						</li>
					</ul>

					<input type="hidden" 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彻底解决了！