摘要：
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 阅读全文
摘要：
利用 CSS 来实现对象的垂直居中有许多不同的方法，比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法，以及它们各自的优缺点。(可以看看测试页面，有简短解释。)方法一这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。<div id="wrapper"><div id="cell"><div class=&qu 阅读全文
摘要：
要想更好的理解 css， 尤其是 IE 下对 css 的渲染，haslayout 是一个非常有必要彻底弄清除的概念。大多 IE下的显示错误，就是源于 haslayout。什么是 haslayout ？haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在Internet Explorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当一个元素的 hasLayout 属性值为true时，我们说这个元素有 阅读全文
摘要：
一个常常令设计师和前端开发人员都头疼的事情就是字体的使用，设计师常常在设计稿中使用某些很漂亮的字体，以实现比较酷炫的界面。但这样常常给编码人员造成一些难度，如果在页面中放弃使用这些字体，设计师会感到郁闷，而如果使用这些字体的话，就要切图并使用很多额外的样式——又一个鱼和熊掌的抉择。还好，现在已经有了一些相关的替代技术了。1. @font-faceCSS3的@font-face属性（事实上CSS2中就已引入），为我们带来了一些希望，而Firefox 3.5新增的对@font-face的支持，让我们离这个希望更进了一些。到现在为止，已经有Safari、Chrome、Opera 10和Firefox 阅读全文
摘要：
译自：The Ultimate Guide to CSS Typography中文：CSS文字排版终极指南请尊重版权，转载请注明来源！多谢。在今天的设计中，排版常常被忽视，特别是被网页设计师忽视。这真是件遗憾的事情因为CSS可以做很多事情来控制我们的排版。也就是说，我们被局限于某些“网络安全”排版，但是我们不应该限制我们自己的创造性。本文整理了一些用于在网页上排版的CSS技巧。Font属性CSS提供了font属性，它允许我们在我们的页面中调整文字。这是一系列的关于语法和如何使用CSS调整文字的概述。Font-size使用font-size可以修改你的文字的大小。123font-size: 1. 阅读全文
摘要：
高效的css写法中的一条就是使用简写。通过简写可以让你的CSS文件更小，更易读。而了解CSS属性简写也是前端开发工程师的基本功之一。今天我们系统地总结一下CSS属性的缩写。色彩缩写色彩的缩写最简单，在色彩值用16进制的时候，如果每种颜色的值相同，就可以写成一个：1color：#113366可以简写为1color：#136所有用到16进制色彩值的地方都可以使用简写，比如background-color、border-color、text-shadow、box-shadow等。盒子大小这里主要用于两个属性：margin和padding，我们以margin为例，padding与之相同。盒子有上下左右 阅读全文
摘要：
PNG图像格式介绍：PNG是20世纪90年代中期开始开发的图像文件存储格式，其目的是企图替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。流式 网络图形格式(Portable Network Graphic Format，PNG)名称来源于非官方的“PNG’s Not GIF”，是一种位图文件(bitmap file)存储格式，读成“ping”。PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可 存储多到16位的α通道数据。IE6下PNG背景透明的显示问题PNG格式比起GIF来表现色彩更丰富，特别是表现渐变以及背景透 阅读全文