日期:2014-05-17  浏览次数:20806 次

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一行报错。知道问题所在就好办了,避开