首页 > 代码库 > [笔记] 几个前端bug的解决方案

[笔记] 几个前端bug的解决方案

jQuery UI下被拖动的元素上飘

症状出现在几乎所有浏览器里。使用 1.10.x 的draggable,在滚动栏下移(即非处于页面顶部)的时候拖动draggable的元素,它会向上跳一段距离。解决办法是将jQuery UI 1.10.x的_convertPositionTo() 和 _generatePosition() 换为1.9.2的或者设置父元素的position为absolute以外的值。(应该是父元素为absolute时计算offset又逗比了……)

参考:Jquery UI 1.10.x Dialog drag issue on large body height

IE里文本框点击后光标向上飘

如果想要居中,兼容IE的话一般是height和line-height设为同一个值。此时需要保证:

  1. input使用content-box
  2. height和line-height都要设,不能只设line-height

应该是IE在border-box下计算line box大小的时候有延迟所以出现了向上飘……其他浏览器没有这个现象。

引起这个bug是因为项目的css拿了bootstrap 3做base,而bootstrap 3给所有元素都设了box-sizing: border-box。

参考:Why did Bootstrap 3 switch to box-sizing: border-box?

无法用checked选中radio button

检查有没有套上form。在某些浏览器下似乎没有套上from的input添加checked是没有样式的=。=

chrome下p里套div造成解析错误

后端的人传来的HTML我一看也是醉了……RT,p下面不要套块级元素,如div,否则

<p>    <div></div></p>

在chrome里解析完之后就成了

<p></p><div></div><p></p>

 似乎在webkit的源代码里见过这部分逻辑……

[笔记] 几个前端bug的解决方案