<button>标签里加交互性操作会有兼容性问题以及重绘问题。

比如

<button class="btn gb_bt hide_poprelation" data-needquestion="1" data-fuin="c265e4bd629300c51b4cd47029b434f5151619af5841a620"><span>+QQ好友</span><div class="pop_relation " style="position:absolute;z-index:1000;left:0;top:30px;text-align:left;cursor:default;"><div class="friend_question" style="zoom:1;">请回答问题:<p class="question">我现在工作的公司</p><p><input type="text" class="py_question_answer"></p><div class="hint" style="padding:5px;display:none">请输入正确答案!</div></div><div class="tip_button" style="zoom:1;"><button class="bt_tip_hit">确认</button><button class="bt_tip_normal">取消</button></div></div></div>


此时,把“请输入正确答案”外包裹的DIV的display:none 拿掉,chrome下竟然不会显示! 需要把整个父DIV重新显示/隐藏 才可以出现。

在IE下更夸张,里面的input type="text"根本无法点击和获得焦点。

所以,慎用<button>,早日用DIV代之。

原文地址:https://www.cnblogs.com/crabzzz/p/2933926.html