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

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修复 | 标签为 , , , , , , , , , , , , , , , , , , , , | 留下评论

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实现页面滚动时层智能浮动定位

发表于 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实现div固定页面底部无抖动

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

在做一个页面效果的时候，需要这用这种代码，试试jquery实现效果不怎么理想，用css滤镜实现的话ie6里面老是抖动（你懂的！）总之效果就是不理想，网上搜索了好多 google搜索后我都翻了好几页，也试了好多，但都是不能用的，终于我快要崩溃的时候发现了这个神器，分享给大家哦！哈哈 我把代码公共出来 在IE6里面可以试下 方法一：是用css滤镜实现的 这个没有抖动 content content content content 纯CSS实现div固定页面底部无抖动 -前端开发-武方博 方法二：这个没用css滤镜 在别的文章中看到，可以用position:absolute;来解决IE6的问题，不过，添加position:absolute;之后，依然没有成功。当然，最终，还是用position:absolute;来解决。只是，不一定能成功。因为，有一句非常重要的话需要理解。 fixed元素的绝对位置是相对于HTML元素来说，滚动条是body元素的。 只有记住了这句话，才知为什么position:absolute;很多地方都给出了结果，但当时并未能解决。因......查看更多>>

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

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

微软上线了IE6倒计时网站

发表于 2011/03/07 由 前端开发-武方博  647 views

  　今天，微软上线了一个IE6 Countdown的网站，鼓励全球用户与IE6说再见。并制作了一幅IE6全球分布图，其中橙色代表使用率超过25%的地区，颜色越淡代表该地区的IE6占有率越小。   　　很遗憾，中国仍是使用IE6的主力军，IE6在中国的用户高达34.5%，占全球IE6使用率12.0%中的5.9%，这也就是说IE6的使用者有一半来自中国。 　　从身边开始，影响每一个人，我们不应成为“文明”进步的绊脚石。升级你的IE6，是时候与IE6 Say Goodbye了。 查看更多>>

发表在 前端资讯 | 标签为 , , | 一条评论

把层(div)放到iframe或者flash上面

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

蓝色理想 goos 摘录一段CSS参考手册的话： z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 注释：元素可拥有负的 z-index 属性值。 注释：z-index 仅能在定位元素上奏效（例如 position:absolute;）！ 说明:该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。 那么，问题迎刃而解，如果需要一个层位于一个BT的层之上，那么这两个层都需要必备两个基本的属性： 1. 定位 2. z-index 例： *{font:normal 12px/120% Tahoma;} html{ border:0;} body{ background:#000; overflow:auto;} #t-iframe{ background:#fff; position:relative; z-index:1;} .box{ position:relative; background:#f7f7f7; border:solid 1px #f09; width:200px; height:200px;} pre{ margin:0; padding:8px; color:#f09; line-height:160%;} position:......查看更多>>

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

《CSS尺寸对照表》

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

Points Pixels Ems Percent 6pt 8px 0.5em 50% 7pt 9px 0.55em 55% 7.5pt 10px 0.625em 62.5% 8pt 11px 0.7em 70% 9pt 12px 0.75em 75% 10pt 13px 0.8em 80% 10.5pt 14px 0.875em 87.5% 11pt 15px 0.95em 95% 12pt 16px 1em 100% 13pt 17px 1.05em 105% 13.5pt 18px 1.125em 112.5% 14pt 19px 1.2em 120% 14.5pt 20px 1.25em 125% 15pt 21px 1.3em 130% 16pt 22px 1.4em 140% 17pt 23px 1.45em 145% 18pt 24px 1.5em 150% 20pt 26px 1.6em 160% 22pt 29px 1.8em 180% 24pt 32px 2em 200% 26pt 35px 2.2em 220% 27pt 36px 2.25em 225% 28pt 37px 2.3em 230% 29pt 38px 2.35em 235% 30pt 40px 2.45em 245% 32pt 42px 2.55em 255% 34pt 45px 2.75em 275% 36pt 48px 3em 300% 查看更多>>

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

CSS重设(reset)大全

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

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

发表在 css | 标签为 , , , , , | 留下评论
第 1 页，共 2 页12