默认的表单(form)是有margin的, 所以插入的时候, 可能会使布局变形.
有时候表单内的元素较多, 需要排版, 较为方便的还是table.
为了消除表单给页面布局带来的影响, 我常常喜欢这样插入表单:
<table>
<form method="post" action="?" name="form1" id="form1">
<tr><td><input type="submit" value="submit" /></td></tr>
</form>
</table>
这样就没有表单带来的布局影响了.
然而, 当我用js来操作时, IE下影响不大, 但在FF下就出现问题了:
alert($('#form1').html());
//用纯js操作效果是一样的
IE下正常,可以得到表单的innerHTML, 但FF下却为空.
如果我用js在表单中插入一个元素, 但来alert,发现只有插入的那个元素的html:
$('#form1').append('<input type="text" name="textfield" />');
alert($('#form1').html());
//FF中结果是<input type="text" name="textfield" >
//ie中可以得到原有元素加上插入的元素的html
查看源代码发现, 原来FF把form的结束tag解释在了开始tag之后:
<table>
<form action="?" method="post" name="form1" id="form1"></form>
<tbody><tr><td><input name="textfield" type="text"></td></tr>
</tbody>
</table>
故而form的innerHTML为空.
正确的写法应该是这样的:
<style> /*可在css文件中定义*/
form{margin:0; padding0;}
</style>
<form method="post" action="?" name="form1" id="form1">
<table>
<tr><td><input type="submit" value="submit" /></td></tr>
</table>
</form>
发表评论