几个前端Bug的解决方案

jQueryUI下被拖动的元素上飘

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

  参考:JqueryUI1.10.xDialogdragissueonlargebodyheight

  追记:闲着自己实现了一个可拖拽效果,放在了Gist里,jQueryUI的这个bug应该是在计算拖拽时位置的时候用了clientX和clientY而不是pageX和pageY,导致计算出来的offset过小引起的

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

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

  input使用content-box

  height和line-height都要设,不能只设line-height

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

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

  参考:WhydidBootstrap3switchtobox-sizing:border-box?

  追记:IE9里使用搜狗输入法时按空格文字会下沉……找来找去发现是浏览器+输入法交互产生的问题也是醉了,前端根本不可控囧解决方法只有:提醒用户要么换掉IE9,要么换输入法hhhh

  无法用checked选中radiobutton

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

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

  后端的人传来的HTML我一看也是醉了……参考MDN的文档,<p>的合法内容为phrasingcontent,其中不包括div

  <p>

  <div></div>

  </p>

  在chrome里解析完之后就成了

  <p></p>

  <div></div>

  <p></p>

最新内容请见作者的GitHub页:http://qaseven.github.io/

时间: 2024-10-02 11:16:38

几个前端Bug的解决方案的相关文章

移动Web开发的bug及解决方案

我目前移动Web开发遇到的bug以及解决方案(慢慢补充当中). 1.android4.0以上一部分手机的webview中,当canvas小于屏幕大小时,绘图时会出现重影,就是说一个图只绘制了一遍,却出现了两个. 解决方案: canvas外层的div需要设定属性style="overflow:visible;-webkit-transform: translateZ(0)";   2.ios应用里面webview在iPhone6或iPhone6 plus获取的设备宽度(device-wi

.Net正式版中的一些Bug及其解决方案

解决 .Net正式版中的一些Bug及其解决方案 (原创) 作者: 飞刀     (1)Session的问题 问题: 在我的Windows.Net 3604 + .Net Framework正式版的编程环境中,.Net下的Session总是有问题,比如我在A程序下设置了一个Session字典,这个Session将会在B程序下读取,现在的情况就是我在B程序读取这个Session时,第一次能够正常读取,但一旦页面被提交(这在Asp.Net编程中是常有的事情),Session就会马上消失,错误报告"Ob

用前端性能优化解决方案弥补CDN的不足

"我已经使用了内容交付网络(Content Delivery Networks, CDN),为什么还需要前端性能优化(Web Performance Optimization,WPO)解决方案呢?"这是用户咨询最多的问题之一.要想了解前端WPO如何弥补CDN的不足,并最终为网页或企业应用提供显著的加速效果,你就必须了解这两个解决方案各自所能解决的不同问题.CDN可以解决的性能问题虽然内容交付网络(CDN)为全球用户改善了网络的可用性和节省了带宽,但CDN解决的主要问题还是延迟.延迟就是

Win8.1鼠标延迟bug推出解决方案

  不知道大家是否还记得之前我们曾为报道过有关微软Win8.1更新导致部分PC游戏遭遇严重的鼠标迟滞问题,以及为大家提供的解决方案.而日前微软也为这一问题给出了一些解决方案. 其实Win8.1上的鼠标问题,主要反映在三种情况上:鼠标跳动,指针无法控制;鼠标移动不成比例,指针与鼠标移动的距离不匹配;滚轮回馈低,滚动慢.为此,微软根据这三种不同的情况给出了三种解决方案. 1.当鼠标无法移动到窗口的各个角落:这是十分容易出现在窗口化运行游戏的过程中,出现这样的情况,你可以通过禁用游戏DPI缩放的的方式

jquery checkbox 勾选的bug问题解决方案与分析

 在做项目的时候遇到个jQuery checkbok复选框的选中取消的BUG,咨询了大神,才闹明白怎么回事,这里记录下来,分析给大家. 先上代码:   代码如下: <form>         你爱好的运动是?<input type="checkbox" id="CheckedAll" />全选/全不选<br />         <input type="checkbox" name="ite

magento 1.4 -- 后台分类页和产品页字段名无法翻译的bug及解决方案

在将1.3用的语言包放到1.4上使用之后,发现后台后台分类页和产品页字段都是英文,而这些英文词在Mage_Catalog.csv中翻译都存在,却不起作用了.是1.4用新的语言包文件来翻译这些词了吗?在我搜索完系统自带的英文语言包,发现这些词不存在与英文包的任何一个文件中,不知道是系统存在的bug还是Magento官方出于什么考虑.   经查找发现这里的字段名用到了getLabelHtml函数来输出,找到这个函数发现是在基础类库里面,打开文件/lib/Varien/Data/Form/Elemen

magento 1.4 -- 后台权限里角色资源无法翻译的bug及解决方案

         在翻译1.4的时候发现后台系统->权限->角色菜单下,角色资源的设置选项全部为英文,并且无论我怎么折腾翻译包都无法将之翻译,想到之前后台分类页和产品页字段名不能翻译的bug,这里应该也是同样的原因.   打开文件/app/code/core/Mage/Adminhtml/Block/Permissions/Tab/Rolesedit.php,找到   $item['text']= (string)$node->title; 修改为 $item['text']= $thi

Asp.net MVC P2 中无法正确获取 CheckBox值的bug的解决方案

View: <%=Html.CheckBox("IsBirthday","我是否过生日", item.IsBirthday)%> Controller: AUser user = new AUser();BindingHelperExtensions.UpdateFrom(user, Request.Form); Model: public class AUser{    public bool IsBirthday{get;set;}} 这样会发生无法

一个由“有道词典”引起的前端bug

项目中有一个input元素用jquery绑定了keyup事件,不知道为什么双击也会触发keyup事件. 测试了下,这个bug只出现在少数人机器的chrome浏览器下. 这时我还以为发现在chrome巨牛逼的bug,还兴冲冲的跑去论坛发贴说:why dblclick trigger keyup?    后来查了很久才发现原来是受到有道词典的影响. 有道词典有一个划词的功能,开启了这个功能,当鼠标双击时,这个软件就会去划词,同时触发"ctrl+c"的键盘事件. 测试页面: http://j