兼容IE8表单布局

最近一个页面上有一个这样的布局模块，如果不考虑IE8，很简单，用flex之类很多方式都可以轻松简单搞定。但现在需要考虑兼容IE8，并且响应式页面，要ipad等不同分辨率下都能良好显示。

(红色长线：input，红色短线：label，蓝色长线：div的边框，蓝色短线：legend(点击切换该区域现实隐藏)
首先先讲蓝色这块的样式效果，蓝色短线要和蓝色长边框有间距。按照现在一般做法肯定是div配合绝对定位之类解决，也是可以的。但想起来有个fieldset标签，发现做这种布局效果用其很方便，按照fieldset>legend 这个结构来，出来就是这个布局，很棒！

下来讲里面红线布局，最开始用 百分比布局，发现第一行2个input和第二行1个input输入框的首尾对不齐，很痛苦。用flex又不兼容ie8。想来想去想到一个办法，思路是把input输入框外面包一层div，然后设置input宽度为100%，并且一定要加上box-sizing:border-box（否则会长度会溢出外层的div）。设置紧挨input框的div层相对定位，padding-left等于label的宽度，并且display:table-cell;然后设置label绝对定位，设置最外层.input-row{display:table;width:100%;},这样整个表单抗住了所有的分辨率，并且纵向input输入框首尾对的都很齐，稳的一批，哈哈
发现关键时刻还是传统的table布局最稳，兼容性也很好。

<fieldset>
	<legend>XXX</legend>
	<div class="input-box">
		<div class="input-row">
			<div class="inputBox">
				<label for="proName">项目名称：</label>
				<input id="proName" type="text"/>
			</div>
			<div class="inputBox">
				<label for="proName1">项目名称：</label>
				<input id="proName1" type="text"/>
			</div>
		</div>
		<div class="inputBox singo">
			<label for="proName2">项目名称：</label>
			<input id="proName2" type="text"/>
		</div>
	</div>
</fieldset>

看到网上还有更多相关的帖子：
多种方法div并行显示

鑫大神解读display:table-cell，很值得一学