分类目录归档：前端开发bug修复

各种浏览器的Hack写法(chrome firefox ie等)

发表于 2012/03/05 由 前端开发-武方博  543 views

Hack是针对不同的浏览器去写不同的CSS样式，从而让各浏览器能达到一致的渲染效果，那么针对不同的浏览器写不同的CSS CODE的过程，就叫CSS HACK，同时也叫写CSS Hack。然后将Hack放在浏览器特定的CSS文件中，让其符合条件的浏览器解析这些代码，就如前面所说的条件样式，我们将CSS Hack代码放入条件样式文件中，符合条件的浏览器就解析，不符合的将不解析，从面达到您所需要的页面渲染效果。总的一句话来说使用CSS Hack将会使用你的CSS代码部分失去作用，然后借助条件样式，使用其原CSS代码在一些浏览器解析，而CSS Hack代码在符合条件要求的浏览器中替代原CSS那部分代码。常见的就是在IE6下使用，不具体说，我想大家都有碰到过了。下面我们就一起来看看所有浏览器都具有什么Hack，换句话说，各种浏览器都能识别哪些CSS的写法。 下面是我收集有关于各浏览器下Hack的写法 1、Firefox @-moz-document url-prefix() { .selector { property: value; } } 上面是仅......查看更多>>

发表在 前端开发bug修复 | 标签为 , | 一条评论

jquery ajax 中文乱码处理

发表于 2012/02/17 由 前端开发-武方博  226 views

jquery在发送ajax数据时，使用了js的内置方法encodeURIComponent对数据进行了处理，该方法的作用是把数据 以UTF-8的方式编码，所以页面的编码如果是GBK或gb2312时候，服务端接收就会出现乱码。 解决方法： ————————————————————— 客户端(jsp页面) 在传递数据前对数据再一次进行encodeURIComponent编码 var m_name = $.trim($(“#m_name”).val()); m_name = encodeURIComponent(m_name);  //对中文进行处理 var map = { m_id:$(‘#m_id’).val(), name:m_name }; $.post(“EditMer.do”,map,function(data){ //….. (根据服务器返回数据进行相关操作) }); ————————————————————......查看更多>>

发表在 前端开发bug修复 | 标签为 , , , , | 留下评论

什么是IE的haslayout

发表于 2012/02/16 由 前端开发-武方博  385 views

IE的haslayout是个很纠结的东西，但作为一名合格的前端开发人员来说，haslayout属性是必须掌握的。 拥有layout概述 Internet Explorer 中有很多奇怪的渲染问题可以通过赋予其”layout”得到解决。John Gallant 和 Holly Bergevin 把这些问题归类为”尺寸臭虫(dimensional bugs)”[32]，意思是这些臭虫可以通过赋予相应元素某个宽度或高度解决。 “Layout”是一个 Internet Explorer for Windows的私有概念，它决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何响应和传递应用程序事件、用户事件等。这种渲染特性可以通过某些 CSS 属性被不可逆转地触发。而有些 HTML 元素则默认就具有”layout”。 微软的开发者们认为元素都应该可以拥有一个”属性(property)”(这是面向对象编程中的一个概念)，于是他们便使用了 hasLayout，这种渲染特性生效时也就是将 hasLayout 设成了 true 之时。了解hasLayout将对IE的臭虫会有更多深入的......查看更多>>

发表在 前端开发bug修复 | 标签为 , , | 2 条评论

css 和javascript 在ie6 ie7 ie8和Firefox下bug兼容解决记录

发表于 2012/01/11 由 前端开发-武方博  1,249 views

居中问题 div里的内容，IE默认为居中，而FF默认为左对齐 可以尝试增加代码margin:auto 高度问题 两上下排列或嵌套的div，上面的div设置高度(height)，如果div里的实际内容大于所设高度，在FF中会出现两个div重叠的现象；但在IE中，下面的div会自动给上面的div让出空间 所以为避免出现层的重叠，高度一定要控制恰当，或者干脆不写高度，让他自动调节，比较好的方法是 height:100%; 但当这个div里面一级的元素都float了的时候，则需要在div块的最后，闭和前加一个沉底的空div，对应CSS是： .float_bottom {clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;} clear:both; 不想受到float浮动的，就在div中写入clear:both; IE浮动 margin 产生的双倍距离 #box { float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略 } padding 问题 FF设置 padding......查看更多>>

发表在 前端开发bug修复 | 标签为 , , , , , , , , , , , , , , , , , , , , | 留下评论

ie6下使用js替换img标签src属性图片不显示的错误

发表于 2011/11/16 由 前端开发-武方博  641 views

首先，我必须再次强调一下，F-U-C-K I-E！ 其次，简单阐述一下这个bug的出现的情况。页面中有个<a href=”javascript:void(0)” onclick=”swapImgSrc()”>这么一个a标签，swapImgSrc这个方法就是替换页面上一个img标签的src属性，以达到动态切换图片路径的效果。但是，但是，在IE6这个浏览器下图片就不会显示，用鼠标右键点击图片应该在的位置选择“显示图片”才能看到图片内容。使用httpwatch等神器可以发现新图片的加载被aborted的，aborted只会出现在加载途中页面被刷新或者重定向，这就让人百思不得其解了。 搜索技术问题还是去google吧，baidu出来的全是不着边并且重复的垃圾文章。有几个吃饱了没事儿干的老外反复试验发现这个问题是ie6中一个底层机制的bug，之后的版本已经解决了。据说<a href=”javascript:void(0)”>或者<a href=#”>这样使用a标签的话并不能阻止a标签最后触发一个什么行为，导致ie6会错误的认为页面刷新或者重定......查看更多>>

发表在 前端开发, 前端开发bug修复 | 标签为 , , | 2 条评论

ie6 overflow-y:auto BUG修复

发表于 2011/10/26 由 前端开发-武方博  651 views

ie6里面如果设置元素为横向滚动条隐藏，竖向滚动条显示，如果改原始内有元素设置position:relative;或者position:absolute;样式，那么ie6里面的竖向滚动条就会失效。 解决办法：设置该元素为position:relative;top:0;left:0;即可解决次BUG！ 查看更多>>

发表在 css, 前端开发bug修复 | 标签为 , | 留下评论

webkit内核下mediaplayer遮挡div

发表于 2011/06/18 由 前端开发-武方博  2,481 views

今天遇到了一个变态的问题，网页中插入windows media player的时候，在ie和火狐，opera里面一切正常，但是chrome里面div总是在播放器空间的下面， 用设置flash透明的方法解决不了，在网上也找不到相关的资料，由于要在播放器上面做一个弹出层，最后我的解决办法是加一个空的iframe把播放器给遮挡起来，当弹出层显示的时候把iframe也显示出来！弹出层关闭的时候iframe也隐藏！（弹出层插件外面的div改成iframe也可以的）多么变态的方法啊！因为在chrome里面播放器空间的层级好像没有iframe高！ 先看下图片 这是我的测试代码（变态的解决办法已经在上面列出来了，不再搞了，fuck,） 哪位大哥大姐有好的解决办法欢迎来搞我！   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <......查看更多>>

发表在 前端开发bug修复 | 标签为 , | 15 条评论

png24在ie6下透明终极测试

发表于 2011/06/12 由 前端开发-武方博  1,814 views

前一段时间项目中需要用到png透明，测试了好多都不可以 。 可能是项目中position用的太多了，本来可以修复png透明的时候 却出现了好多莫名其妙的BUG。 下面是两种最常用png修复方法，一种是用ie滤镜修复的！ 方法一：iepngfix.htc 演示地址：http://www.wufangbo.com/demo/css/09/01/index.html 下载地址：http://www.wufangbo.com/demo/css/09/01.rar 1：下载脚本，将其中的iepngfix.htc和blank.gif解压缩到合适的目录内，.htc即Html Components，该文件需要在CSS中被调用；blank.gif是一个1×1像素的透明GIF图片，缺少该文件会使<img>标签插入的PNG图象显示为红色的叉烧包。 2：在iepngfix.htc中修改blank.gif的路径，var blankImg =‘blank.gif的正确路径’，这是惟一一个需要修改的配置。 3：在css中将需要使用透明PNG的元素与.htc文件关联。 例如：*{behavior: url(iepngfix.htc) } 通过以上三步，IE6就能支持透明PNG图片了。 &nb......查看更多>>

发表在 css, 前端开发bug修复 | 标签为 , , | 4 条评论

jQuery仿淘宝店铺浮动层上下滚动固定效果插件

发表于 2011/04/28 由 前端开发-武方博  3,251 views

博客里面已经有过一个类似的效果了jQuery实现页面滚动时层智能浮动定位 但是今天看见css88愚人码头的博主也分享了一个类似的效果【jQuery插件】capacityFixed-类似于新浪微博新消息提示的定位框 其实不光是新浪微博里面有这个效果，包括淘宝店铺里面也有这个效果，淘宝店铺搜索前端开发实例  注意那个排序的工具条哦 就是当用户滚动浏览器的滚动条的时候，把某一个固定的浮动层移动到浏览器的顶部，然后实现修改position属性，position;fixed效果，哈哈 但是看到css88里面也这次支持了IE6啦，不过测试了一下 发现ie6里面还是有瑕疵的，滚动的时候ie6会发生抖动。所以想着给修复下，折腾了好久，累死我了 竟然没有搞定 555！测试了下淘宝的店铺里面在ie6里面也是抖动的，看来我是真的没有办法了！悲催啊。   演示地址：http://www.wufangbo.com/demo/jquery/09/index.html 下载地址：http://www.wufangbo.com/demo/jquery/09/09.rar 下面的这段代码......查看更多>>

发表在 jquery, 前端开发, 前端开发bug修复 | 标签为 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | 3 条评论

jQuery和Discuz js冲突解决办法

发表于 2011/04/26 由 前端开发-武方博  1,254 views

$(id)函数冲突 Discuz使用了S()作为对象选取函数，刚好与jQuery默认的$()函数重合造成冲突，代码依旧位于include/common.js中，如下： Code: function $(id) {    return document.getElementById(id); } 解决方法1： 将jquery.js在common.js之前载入，不然jquery的$()函数会覆盖common.js的$()函数；然后用到jQuery的$()函数的地方都用jQuery()代替。 解决方法2： 将jquery.js在common.js之后载入，在调用jQuery的函数前使用一下代码： Code: var jq = jQuery.noConflict(); 以上是将$()函数映射回原来的$()函数；之后便可以使用jq()或jQuery()来代替jQuery原来的$()函数，这里jq和jQuery相同，而$()函数则是原来Discuz的$()函数。 解决方法2也可使用jQuery.noConflict()的其他用法代替，参见后面的使用说明。 ============= jQuery.noConflict() 使用说明 运行这个函数将变量$的控制权让渡给第一个实现它的那个库。这有......查看更多>>

发表在 jquery, 前端开发bug修复 | 标签为 , , , , , , , , , , , , , , | 留下评论

jQuery实现页面滚动时层智能浮动定位

发表于 2011/04/22 由 前端开发-武方博  3,695 views

一、应用展示 关于层的智能浮动效果早在几年前我就在国外的一些个人网站的垂直导航上见到了，现在似乎在国内一些商业网站上也屡见此效果，例如淘宝网的搜索结果页的排序水平条，在默认状态下，滚动条跟随页面滚动，如下： 随着页面向下滚动，当此水平条接触浏览器的上边缘时，水平条独立出来，不跟随滚动条滚动了，如下图所示： 类似的效果在新浪微博上也有： 当页面滚动，新动态提示开始要淡出浏览器窗口的时候，其浮动于浏览器窗口的最上沿显示，如下图所示： 此效果实现原理其实很简单，本文就将展示其实现。 二、实现原理 默认状态就是默认状态，什么事情也不用做，定位是absolute也好，static也好，都ok。关键是当浏览器滚动的时候，对象（要浮动的层）要移除浏览器界面视区的时候，修改其position属性，让其浮动在窗口的上沿显示就可以了。最好的position属性就是fixed了，可以在IE6+和其他浏览器下浮动层平滑固定定位，由于IE6前辈不支持fixed属......查看更多>>

发表在 jquery, 前端开发, 前端开发bug修复 | 标签为 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | 一条评论

JQuery IFrame框架高度自适应（支持嵌套–兼容IE,ff,safafi,chrome）

发表于 2011/04/22 由 前端开发-武方博  4,417 views

在网上找了很多的iframe自适应高度的脚本，对浏览的的兼容性都不好。所以就想利用jquery强大的兼容性，写一个iframe自适应高度的脚本。  jquery很强大，代码很简单： $("#iPersonalInfo").load(function() {  $(this).height($(this).contents().height());  })  有一点需要注意的，我也在调试的时候才发现的，耽误了不少时间。就是绑定事件必须在iframe加载完毕之前绑定，否则不会执行。  以下是jQuery,load事件的概述  在每一个匹配元素的load事件中绑定一个处理函数。  如果绑定给window对象，则会在所有内容加载后触发，包括窗口，框架，对象和图像。如果绑定在元素上，则当元素的内容加载完毕后触发。  注意:只有当在这个元素完全加载完之前绑定load的处理函数,才会在他加载完后触发。如果之后再绑定就永远不会触发了。所以不要在$(document).ready()里绑定load事件，因为jQuery会在所有DOM加载......查看更多>>

发表在 jquery, 前端开发, 前端开发bug修复 | 标签为 , , , , , , , , , , , , , , , , , , , | 一条评论

css垂直水平居中的整理

发表于 2011/03/08 由 前端开发-武方博  1,153 views

  记得就一句话是这样说的：table能实现的，css一定能实现；css实现的，table未必能实现。水平和垂直的居中，其实不是什么难事，前提是弄懂了各个浏览器的兼容性以及应对这些兼容问题的css hack。 方法一 html <div class="demo1"><img src="图片路径" alt="" /></div> css .demo1 { width:180px; height:180px; line-height:180px; *font-size:160px; border:1px solid #ddd; text-align:center;} .demo1 img { vertical-align:middle;} PS：利用行高等于盒子高度实现高级浏览器，IE6/7的hack font-size等于盒子height乘以差不多0.873的数值，参看：怿飞：图片垂直居中的使用技巧。 方法二 html <div class="demo2"><img src="图片路径" alt=""&nbs......查看更多>>

发表在 前端开发bug修复 | 标签为 , , , | 一条评论

IE6,IE7,IE8css bug大集合

发表于 2011/03/08 由 前端开发-武方博  2,174 views

  概述 IE浏览器以不支持大量的css 属性出名，同时也因其支持的css属性中存在大量bug。 本页列举了IE下的一些问题，实例样本和一些我们已知的解决方法。 尽管我已经尽力按照它们本来的性质对它们进行分类，仍有许多bug可以分在好几个部分之下，这种情况下，我将会将此bug分在普通bug这一部分。 统计 目前为止。本站点包含46个”普通bug”教程，5个”haslayout bug”教程，6个”不支持的方法”教程，一个“冲突bug”教程。总共58个教程，70个解决方法。 最近的教程发布于2009年8月19日 15:38:47 星期三 站点包含44个IE6 bug，28个IE7 bug以及19个IE8 bug。 注意版本 在教程中你会看到诸如“影响：IE8和所有以下”或“修复：所有版本”。这里的“所有”意思是IE6，IE7和IE8。 IE5和IE5.5已经是历史了，本网站没有考虑这些版本的教程和解决方案的。 普通bug 此部分包含的是那些不能快速定位为其他部分或是可以同时归类到两部分或更多部分的bug。 普通IE ......查看更多>>

发表在 前端开发bug修复 | 标签为 , , , , , , , , , , , , , , | 3 条评论

iframe高度动态自适应

发表于 2010/12/09 由 前端开发-武方博  1,180 views

一、前言碎碎念 我从来对iframe就没有什么好感，对其基本上是不屑一顾。但是人在江湖，身不由己。经理发话，新功能使用iframe实现，没办法，只好折腾， 两大烦人的东西，一是带遮罩的弹框提示，而是iframe高度问题。前一个烦人的问题使用其他形式的提示来规避，后一人扰人的问题确实没有什么经验，花了 点时间折腾了下，基本上实现了效果，跨域没问题，兼容性也没问题，于是，写个小文备忘下，下次再使用的时候就到这儿拷贝核心代码。 口碑UED有篇大米的“再谈iframe自适应高度”一文，可以看看，虽然貌似兼容性没有个调调。此文评论有个如下的链接地址：http://css-tricks.com/examples/iFrameResize/crossdomain.php，跨域且比较兼容的iframe高度定时自动变化的demo，但是，此demo中的js像个老太太一样啰哩吧嗦，裹脚布般又臭又长，于是，对js脚本重新修身整形，把老太太变成了苗条妙龄少女。 二、原理简述 本文展示的实现方法需要父页面和框架子页面相互配......查看更多>>

发表在 前端开发bug修复 | 标签为 , , | 留下评论
第 1 页，共 2 页12