HTML标签嵌套问题【原创】

前些天在做项目时遇到的小问题。部分代码如下：

<button type="button" data-id="{{ item['id'] }}" class="btn-delete" title="删除" >
<a href="{{ path('zm_wjteacher_teacher_del', {'id': item['id']} ) }}"></a>
</button>

这段代码很简单，就是一个button标签嵌套一个a标签。

a标签里的路由，就是提交的地址。
完成的功能是点击按钮时，删除一行数据。

看上去很简单的功能吧，在谷歌浏览器里测试是正常的。

可是在IE下就出现了问题，连IE11都不兼容。于是换了种方法，用js跳转。代码如下：

//删除
			$(".btn-delete").click(function() {
				var teacher_id = $(this).data('id');//获取当前需要删除那一行的id
				var name = $(this).parents("td").siblings("td").find("#name").val();//获取姓名
        		var print_str = prompt("请输入大写的DELETE，以便于您删除教师-" + name);//提示框
        		if (print_str == 'DELETE') {
        			location.href = "{{ path('zm_wjteacher_teacher_del', {'id': 'teacher_id'} ) }}".replace("teacher_id",teacher_id);//页面跳转到指定地址。replace用于在twig模板里使用js变量。
        			return true;//如果输入'DELETE'，删除成功。
        			alert("删除成功！");
        		} else {
        			alert("删除失败！");
        			return false;//否则删除失败。
        		}
			})

用了js的方法，IE和谷歌下，删除的功能都是正常的了。

而button标签嵌套a标签的这种方法为什么失败？

上网查了下，button里面不能嵌套a标签，不然在js里面会有两个事件。
现在知道了是标签嵌套的问题，那么究竟标签嵌套有哪些规则呢？

大家可以看下我的下一篇博客——回顾HTML标签嵌套的规则，整理了一些标签嵌套的规则。