标签归档：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修复 | 标签为 , , , , , , , , , , , , , , , , , , , | 一条评论

Reset CSS 研究

发表于 2011/03/10 由 前端开发-武方博  735 views

  回顾与反思 第一份 reset css 是 Tantek 的 undohtml.css, 很简单的代码，Tantek 根据自己的需要，对浏览器的默认样式进行了一些重置。 Eric 的也是如此。 YUI 除了 cssreset, 还配套有 cssfonts 和 cssbase. cssreset 清除默认样式，cssfonts 和 cssbase 则将一些元素的默认样式重设回来。 很长一段时间，* { margin: 0; padding: 0; }和 YUI cssreset 模糊了我对 reset 的理解，让我认为 reset 就应该清除掉所有样式，将一切归零。 后来阅读 Eric 的博客，发现 Eric 并不期望大家下载他的 reset.css 后直接拿去用。而是期待能根据具体需求，适量裁剪和修改后再使用。 世间的事总会有些戏剧化，Eric 的期待没有如意。大家都想得到通用解决方案，期待银弹。在这种渴求下，YUI cssreset 很彻底很干净，广为流传。 更戏剧化的是，由于 YUI 的 cssfonts 和 cssbase 只考虑了西欧文字，对汉字的考虑不多。这导致国内用户大部分只会用 cssreset. 比喻......查看更多>>

发表在 css | 标签为 , , , , , | 留下评论

CSS reset怎么写

发表于 2011/03/10 由 前端开发-武方博  923 views

  最近看到一个词叫css reset。什么叫做css reset呢？我理解为重置css，也就是重置默认样式。我在HTML下的默认样式中讲到，一些标签元素在HTML下有一个默认属性值，我们在写css页 面的时候，为了避免在css中重复定义它们，我们需要重置默认样式（css reset）。每个人的用法和写法都不一样。找到一篇关于css reset的调查文章， 可以看看国外使用css reset的比例调查。 这里有一篇总结css reset比较全面的文章，列举了多种css reset的写法，可以看看。 译文地址查看 原文地址查看 接下来我也查看了国内的两个网站，用Firebug按F12看看他们的css reset怎么写的？ 淘宝（www.taobao.com）： html { overflow-x:auto; overflow-y:scroll; } body, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, p, blockquote, th, td { font-weight:400; margin:0; padding:0; } h1, h2, h3, h4, h4, h5 { margin:0; padding:0; } body { ba......查看更多>>

发表在 css | 标签为 , , , , , | 留下评论

ie6和ie7下z-index bug的解决办法

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

  一、匆匆带过的概念 关于CSS中层级z-index的定义啊什么的不是本文的重点，不会花费过多篇幅详细讲述。这里就简单带过，z-index伴随着层的概念产生的。网页 中，层的概念与photoshop或是flash中层的概念是一致的。熟悉photoshop或是flash的应该知道，层级越高（图层越靠上），越在上 面显示，如果层发生重叠，层级高的会覆盖层级低的，如果非透明或半透明，则会遮挡。 在photoshop中，层的高低就是靠手动调的，鼠标拖拽，或是ctrl+]或是ctrl+shift+[快捷键改变层的次序。如下图，鼠标拖移 改变层次序的过程中： 在flash中，类似，可以手动改变图层次序，或是使用as脚本，例如：容器对象.setChildIndex(显示对象,0)就是让对象底层显 示，而容器对象.setChildIndex(显示对象,容器对象.numChildren-1)就是最上面显示。 在CSS中，显然，只能通过代码改变层级，这个属性就是z-index，要让z-index起作用有个小小前提，就是元素的position属性要 是relative，......查看更多>>

发表在 css | 标签为 , , , , , , , , , , , , , , , , , , , , , | 4 条评论

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 条评论

CSS重设(reset)大全

发表于 2011/03/04 由 前端开发-武方博  683 views

在当今网页设计/开发实践中，使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键。在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则，并且呈现相同的视觉效果(没有兼容性问题)。但是，我们并没有生活在这个完美的世界，现实中发生的失窃却总是恰恰相反，很多CSS样式在不同的浏览器中有着不同的解释和呈现。 当今流行的浏览器(如:Firefox、Opera、Internet Explorer、Chrome、Safari等等)中，有一些都是以自己的方式去理解CSS规范，这就会导致有的浏览器对CSS的解释与设计师的CSS定义初衷相冲突，使得网页的样子在某些浏览器下能正确按照设计师的想法显示，但有些浏览器却并没有按照设计师想要的样子显示出来，这就导致浏览器的兼容性问题。更糟的是，有的浏览器完全无视CSS的一些声明和属性。 正因为上述冲突和问题依然存在于这个”不完美的世界”，所以一些设计师想到了一种避免浏览器兼容性问题的方......查看更多>>

发表在 css | 标签为 , , , , , | 留下评论

ie6,ie7,ie8 css bug兼容解决记录

发表于 2010/12/07 由 前端开发-武方博  9,003 views

断断续续的在开发过程中收集了好多的bug以及其解决的办法，都在这个文章里面记录下来了！希望以后解决类似问题的时候能够快速解决 ，也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法！ 1：li边距“无故”增加 任何事情都是有原因的，li边距也不例外。 先描述一下具体状况：有些时候li边距会突然增 加很多，值也不固定（只在IE6/IE7有这种现象），让人摸不着头脑，仔细“研究”发现是由于其低级元素ul的padding引 起，padding的上下值对li有影响，左右无影 响。所以只好笨手笨脚地把padding去掉，换成margin。这是能解决问题，但往往不是我们想要的结果，或许 还会引起其他不必要的怪现象。 现在终于发现解决这个问题的方法，其实很简单，既然是有ul引 起的，就设置ul的显示形式为*display:inline-block;即可，前面加*是只 针对IE6/IE7有效，其他浏览器并不渲染这个属性。 2：分页数字 字......查看更多>>

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

css bug 收集表

发表于 2010/12/07 由 前端开发-武方博  762 views

问题 浏览器 DEMO 解决方法 Hacking Rules:property:all-ie\9; property:gte-ie8\0;*property:lte-ie7; +property:ie7; _property:ie6; 1 input[button | submit] 不能用 margin:0 auto; 居中 IE8 bug | fixed 为input添加width 2 body{overflow:hidden;}没有去掉滚动条 IE6/7 bug | fixed 设置html{overflow:hidden;} 3 hasLayout的标签拥有高度 IE6/7 bug | fixed *height:0;_overflow:hidden; 4 form>[hasLayout]元素有margin-left时，子元素中的[input | textarea] 出现2×margin-left IE6/7 bug | fixed form > [hasLayout 元素]{margin-left:宽度;}form div{*margin-left:宽度÷2;} 5 当border-width有1条<边3条时被设置成dotted时，1px的边dotted显示成dashed IE7 bug | fixed 不在同一个元素上使用不同宽度的 dotted 6 当子元素有position:relative的时候，父元素设置overflow:[hidden|auto]相当于给子元素设置了......查看更多>>

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