随笔分类 - IE6 BUG
摘要：咳! 哎!..... :-( "你听见了么? 这些都是大家抱怨IE6下不能实现png图片漂亮的明效果的哀叫声,的确是无奈呀.....不过现在幸运的是,我们能够让这一切的抱怨都停止.网络上解决IE6下Png透明解决方案有很多,例如IE PNG Fix from TwinHelix,Javascript IE PNG Fix,Transparent PNGs in Internet Explorer 6 from 24 ways.等等.然而现在,我要和你分享的是Unit PNG Fix.因为它的确是太出众了.1.非常小的javascript文件:1kb!2.解决因为IE的滤镜属性所带来的
阅读全文
摘要：今天天外飞仙起早了，收集个插件分享大家—DD_belatedPNG插件,可以让图像透明，这个方案只需要一个理由,就是它支持backgrond-position与background-repeat.这是其他js插件不具备的.同时DD_belatedPNG还支持a:hover属性,以及<img>。原理这个js插件使用了微软的VML语言进行绘制,而其他多数解决PNG问题的js插件用的是AlphaImageLoader滤镜.使用方法1.在这里下载DD_belatedPNG.js文件.http://dillerdesign.com/experiment/DD_belatedPNG/#down
阅读全文
摘要：在实际应用中，考虑到seo，很多button，icon都要用到inline-block和text-indent来处理，例如：<a href="#" class="btn">Button</a>css我习惯写成这样.btn{display:inline-block; width:100px; height:23px; text-indent:-9999px;background-image:url(img.jpg);}在标准浏览器下是没问题的，但是在IE6和7下会触发A标签消失的bug。解决方法1：display:inline-bl
阅读全文
摘要：症状当绝对定位元素的子元素被触发hasLayout时，该元素宽度会撑满整个窗口<div class="absolute"> <div class="inner"> <p>IE bug</p> </div> </div>.absolute{position:absolute;left:100px;top:100px;border:1px black solid;padding:5px 10px;background-color:yellow;} .inner{#zoom:1;} IE7
阅读全文
摘要：一、匆匆带过的概念关于CSS中层级z-index的定义啊什么的不是本文的重点，不会花费过多篇幅详细讲述。这里就简单带过，z-index伴随着层的概念产生的。网页 中，层的概念与photoshop或是flash中层的概念是一致的。熟悉photoshop或是flash的应该知道，层级越高（图层越靠上），越在上 面显示，如果层发生重叠，层级高的会覆盖层级低的，如果非透明或半透明，则会遮挡。在photoshop中，层的高低就是靠手动调的，鼠标拖拽，或是ctrl+]或是ctrl+shift+[快捷键改变层的次序。如下图，鼠标拖移改变层次序的过程中：在flash中，类似，可以手动改变图层次序，或是使用as
阅读全文
摘要：IE6 bug到底令我们前端开发头痛我就不多说了说实话，很多东西我一直在回避IE6的BUG，比如不用半透明的PNG。。。但是毕竟IE6还将长期存在，而且IE6在中国比例目前还绝对多数，所以我们无法回避。逃无可逃，退无可退！现整理收集《【IE6的疯狂系列】IE6 bug大全》仅供参考。如果大家发现IE6或者IE7的BUG，并愿意共享，请您留言，来邮件:feiwen8772@qq.com,或者QQ：148246293，本人将尽快总结这里，和大家一起分享。【IE6的疯狂之一】IE6中奇数宽高的BUG：http://www.cnblogs.com/liko/archive/2011/04/28/203
阅读全文
摘要：大家可能都知道IE6下使用DXImageTransform.Microsoft.AlphaImageLoader滤镜（用于PNG32 Alpha透明）后链接不能点击的BUG，大家也都知道只要在a标签上加相对定位的属性（position:relative）就可以点击了。见demo页面中的例子1：http://www.css88.com/demo/ie6bug_filter/(使用IE6查看)；非常好！但是如果在使用滤镜容器的中加上绝对定位，悲剧发生了！a标签上加相对定位的属性（position:relative）链接依然不能点击！见demo页面中的例子2：http://www.css88.com
阅读全文
摘要：还真不知道这个题目这么写，暂时就用这个吧。今天同事给我看了一个display:none引起的3像素的BUG，非常奇怪！从来没碰到过display:none还能引起这种bug。看代码：1<divstyle="width:300px; margin:20px; border:1px solid #000; overflow:hidden; zoom:1;">2<divstyle="background:green; width:10px; float:left; height:300px;"></div>3<divs
阅读全文
摘要：一 css的优先级今天有人跟我说css hack中用!important来区分ie6，因为ie6不支持!important，是的在很早以前我也是用过这种方法写hack，但是后来就基本不用了。本来我对他谁的ie6不支持!important也没什么异议，可是正好在前几天正好用个这个!important属性解决了一个样式优先级的问题，而且是支持ie6的，这是为什么呢？到底ie6支不支持!important呢？首先我们来看看!important这个属性的作用：!important是用来提升样式优先级的，我们知道样式是有优先级的。我们先看看css的优先级的几个基本的规则：ID选择器(形如#id{}) &
阅读全文
摘要：在前端开发中，经常会用到css的position:absolute来使层浮动，前通过left,top,right等属性来对层进行定位，但ie6对left,top,right等属性的解释和ie7，ie8及firefox、chrome等不一致。在父层使用position:relative;和padding（当然0值除外）后，ie6中层的定位起始坐标是从padding后的位置算起，而其他则从层的真实位置算起，而非被padding改变后的那个位置。这点造成使用position:absolute进行层定位时ie6与其他浏览器的表现不一样。目前解决办法，使用csshack,_left针对ie6进行重设。另
阅读全文
摘要：曾经写过【IE6的疯狂之六】li在IE中底部3像素的BUG（增加浮动解决问题），原文地址：http://www.css88.com/archives/421；IE6 BUG大全：http://www.css88.com/archives/579但是这次li在IE中底部出现的不是3像素而是一整条空白行，如图：HTML代码：1<ul>2<li><ahref="#">第1条连接</a></li>3<li><ahref="#">第2条连接</a></li>
阅读全文
摘要：IE6下链接伪类（:hover）CSS背景图片有闪动BUG，主要原因ie会再一次请求这张图片，或者说图片没被缓存。例如：CSS代码a:hover{background:url(imagepath)}常用的解决方案：在页面底部添加以下IE6专用代码，让IE6缓存CSS背景图片至本地，这样a:hover时IE6就不会再重新向服务器请求加载背景图片了。XML/HTML代码<!–[ifIE6]><scripttype=”text/javascript”>document.execCommand(”BackgroundImageCache”,false,true); </s
阅读全文
摘要：这是ie6 出现的奇怪现象。这是由于css 和html 的编码不同所引致。满足下面条件就会引起 注释下面的样式不起作用：1. css有中文注释2. css为ANSI编码3. html为utf-8编码解决方法：1. 去掉中文注释，用英文注释2. 统一css 和 html 的编码建议采用第二种解决方法ps： css为uft-8 html 为ANSI 不会出现失效的情况。参考文章：冯子胡说 的http://vontall.blogbus.com/logs/4366443.html=
阅读全文
摘要：今天开发项目中碰到一个li在IE中的BUG，先来看设计原型（如图：）两个红色中间是<li>1px的底边框；我写的代码如下：=============================================================<!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“
阅读全文
摘要：IE6以及一下版本下，选择框Select会覆盖Div中的内容一般情况下，可以将显示的内容放到Iframe中，然后再显示框架内的内容。由于Iframe的可以显示在Select上层，就可以解决这个问题。不过这样做在实现上比较麻烦。有个解决的部分就是在Div内容中加入不显示的Iframe框架即可，不用修改其他内容。例如：http://www.css88.com/demo/div_select/div_select.htmlCSS代码body{margin:0;padding:0;text-align:center;background-color:#eee;} #bd{margin:20pxauto
阅读全文
摘要：在IE6下使用浮动可能会出现文字重复的情况.在IE6下，浮动层之间有注释文字的话，之前那个浮动层的内容文字就有可能遭遇一个“隐形”的复制，但是代码里查看文字可并没有多出来。看个例子：XML/HTML代码<!DOCTYPEhtmlPUBLIC”-//W3C//DTDXHTML1.0Transitional//EN””http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><htmlxmlns=“http://www.w3.org/1999/xhtml”><head><metahttp-equiv=
阅读全文
摘要：问题：2列布局。左列固定，右列液态我需要做一个布局。2列，左边列固定宽度。右边列使用剩余宽度。整体宽度不固定，这样不管在17 还是19的屏幕上，左边列始终宽度不变，右边列宽度始终占据剩余宽度。但是我写这个布局缺在ie6下面始终解决不了3像素bug。请在IE6下测试<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “<a href=”http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd” target=”_blank” rel=”external”
阅读全文
摘要：ie7,fireofx,opera,及至webkit内核的chrome ,safari….. 这些浏览器均支持png的Alpha透明。很多人说IE6不支持PNG透明，其实IE支持100%透明的PNG，疯狂的IE6只是不支持png的Alpha透明。这个BUG给我们带来了很大的困扰。但是这仍然存在很多问题，比如半透明的PNG背景图片。Gulu77整理了4种IE6中PNG Alpha透明的方法：测试实例：http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_IE6png8/index.html这里用IE6测试，插入的图片和背景图片没有透明。第一种方法：Al
阅读全文
摘要：6真是太疯狂了。今天由于项目需要做了这么一个布局：一个外部的相对定位div，内部一个绝对定位的div（right:0），如图：可是在IE6下查看，却变成了right:1px的效果了：IE6还有奇数宽高的bug，解决方案就是将外部相对定位的div宽度改成偶数。高度也是一样的查看源码：CSS代码:#out {width: 609px;/*这里宽度为奇数，bug就出现了！！改成偶数就OK了*/height: 300px;position: relative;background:#FF0000;color:#FFF;}#inn {width: 200px;height: 250px;position
阅读全文
浙公网安备 33010602011771号