容我织梦

1. 设置position: relative

将一个元素设置为”position:relative”可以解决很多问题，特别是你曾经遇到隐藏的或对齐诡异的盒子。

2.将浮动元素设置为display:inline

具有margin属性的浮动元素可能引起的IE6双倍margin问题，比如，你为一个元素指定margin-left为5px，但是IE6中实际上却表现为10px。”display:inline”将解决这个问题，当然，方法也不是只有这一个。

3. 将一个元素设置为hasLayout

很多IE6(和IE7)的渲染问题可以通过设置元素的hasLayout来解决。 用来确定相对于其他元素，内容是如何布局和定位的。如果你需要设置一个inline元素(比如一个链接)为block元素，或者是应用透明效果。

最简单的设置hasLayout的方法是为CSS设置一个高度或宽度（zoom也可以用，但是zoom并不是CSS标准的一部分）。我们推荐设置实 际尺寸，但是问题是这是不现实的，你可能需要使用”height:1%”。如果父元素并没有设置高度，该元素的实际高度并不受影响，而且这个时候 hasLayout已经被启用。

4. 修正重复文字bug

复杂的布局可以触发在浮动元素的最后一些字符可能出现在出现在清除元素下面的bug。这里有几个解决方法，有些是完美的，但是做一些反复试验也是必须的：

• 确保所有的元素使用”display:inline;”
• 在最后一个元素上使用一个”margin-right:-3px;”
• 为浮动元素的最后一个条目使用一个条件注释，比如：

  1	<!--[if !IE]>Put your commentary in here...<![endif]-->

• 在容器的最后元素使用一个空的div(它也有必要设置宽度为90%或类似宽度。)

5. 使用!important 或高级选择器来区分IE6

不使用传统Hack或在额外文件中的条件CSS的方法，写出特别针对IE6的可行的代码也还是有可能的。比如最小高度可以通过这段代码来定义：

1
2
3
4
5

#element {
 min-height: 20em;
 height: auto !important; /* 所有浏览器都理解这段代码 */
 height: 20em; /* IE6 错误的使用这个值 /*
}

全文阅读 »

在前端开发中，经常会用到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进行重设。

由 愚人码头 撰写 　http://www.css88.com/archives/1584

大家在写按钮（input、button）的时候会发现在 IE 下：

1. 随着字数的增多，两边的间距也会越来越大。
2. 在 WIN 的XP 风格下，当字数很多时，两边还会出现严重的锯齿。

到底是什么原因呢？

蓝色理想 原 WEB标准化专栏 的斑竹 zbm2001z 给出了一个答案：

1、IE 在按钮的 value 值每增加 4 个字节（汉字为 2 个）时，就会在按钮的两边产生总共一个字节的内边距宽度。
2、IE 的按钮（XP 风格）默认样式是一个固定尺寸的圆角矩形图片作背景，所以一旦按钮变宽变高后，这个固定尺寸的圆角矩形图片的边缘自然就会出现“拉毛”的现象了。

对于第二个问题我们暂时没办法去解决，除非 WIN 系统自己修复 BUG ，但对于第一个问题 ，我们还是可以修复的。

IE 下给按钮元素设置 overflow 属性的 visible 值（注 ：padding 值仅在设置了overflow:visible 属性后才有效），这个属性其实在上次写的《background-clip 与 background-origin 的一则运用》一文中已经使用。不过在今天阅读了《The stretched buttons problem in IE》后，发现原来还有一个小 BUG —— 如果将按钮置于表格单元格中，虽然按钮显示正确了，但是原先预留的宽度大小却没有改变，仍然占据着空间，需要在 IE6 中设置按钮的宽度（width）为 0（IE7同样也存在此 BUG，但暂时没有寻找到好的方式解决）。

最终的修复代码如下：

[code]input.button {
padding: 0 .25em;
width: auto;
_width: 0;
overflow:visible !ie;
}[/code]

今天我们向大家介绍，无序列表ul在IE6、IE7中下边距出现问题的bug，或许您在进行CSS布局开发时已经遇到了这样的苦恼。
　　本文作者：52CSS.com 如需转载请建立本站链接（http://www.52css.com/），并且不得随意改动文章内容、保留此版权声明文本！
　　在大多数时候，无序列表内的列表项li都是固定的。比如，有六个，八个，十个。因而我们可以轻松的定义ul的宽度和高度。而在一些交互性很强的网站中，无序列表ul内的列表项li是不固定个数的。因而我们不能定义ul的高度，需要让它自适应li的个数，随着功能与内容的需要，随时动态的调整它的大小。在这样的情况下，本实例所要讲述的bug就要出现了。
　这是一个由六个列表项li组成的无序列表，而li的数量可能有所增加或减少，因而我们不能定义ul的高度，按照正常的思路，我们定义ul的上侧与左侧的内边距，再定义li右侧与下侧的外边距，实现等边距的效果。思路如下图所示。
　　我们开始着手编码。HTML代码如下：

Example Source Code [www.52css.com]

　　开始CSS编码

Example Source Code [www.52css.com]
* {
padding:0;
margin:0;
list-style:none;
}
ul {
width:390px;
margin:20px auto;
padding:10px 0 0 10px;
border:1px solid #ccc;
overflow:hidden;}
li {
float:left;
width:120px;
height:150px;
margin:0 10px 10px 0;
overflow:hidden;
}
　　我们在IE6、IE7和FF中浏览页面效果。发现在IE7中，ul底部的间隔消失了，也就是li的下外边距定义没有起到作用。如下图如示。

　　这是一个IE7的bug，我们通过CSS HACK来修复它，应用“*+html”作为选择器，针对IE7，设置UL的下内边距。代码如下。

Example Source Code [www.52css.com]
*+html ul {
padding-bottom:10px;
}
　　经过设置后，发现在IE6、IE7和FF中浏览均没有再出现问题。
　　本文作者：52CSS.com 如需转载请建立本站链接（http://www.52css.com/），并且不得随意改动文章内容、保留此版权声明文本！
　　然后我们的列表项li是不固定的，我们去掉一个列表项li再浏览页面。发现在IE6下，ul底部的间隔又一次消失了，也就是li的下外边距定义没有起到作用。如下图如示。

　　我们不得不进行修复，针对IE6进行CSS HACK编码。应用“*html”作为选择器，针对IE6，设置UL的下内边距。代码如下。

Example Source Code [www.52css.com]
*html ul {
padding-bottom:10px;
}
　　再次运行后，发现在IE6、IE7和FF中浏览均没有再出现问题。
　　这也太不可思议了。怎么会频繁的出现如此多的问题。我们不得不考虑新的出路了。其实我们只要换一个角度去思考，这两个bug均可以成功的避免。
　　本文作者：52CSS.com 如需转载请建立本站链接（http://www.52css.com/），并且不得随意改动文章内容、保留此版权声明文本！
　　也就是，我们设置ul的左侧和下则外边距，设置li的上侧和右侧外边距来实现间隔。如下图所示。
　　这样设置以后，无论在IE6、IE7和FF中，运行均没有问题。
　　有些时候，经过思考与变通，可以成功的避免很多问题，在CSS网页布局中，需要灵活的运用各种技巧与经验，往往有事半功倍的效果。有何经验与技巧欢迎您在52CSS.com留言或评论，与大家一起分享。

写在最后的自己的话：其实网上很多很多的文章都是转来转去，改来改去，经过自己测试的又有几个人？我发现这个BUG只有IE7有，IE6下貌似没有，还希望大家一起测试，发现问题，解决问题，不断进步！

:hover是我们在CSS设计中最常运用的伪类之一，许多绚丽效果的实现离不开伪类:hover，比如我们常见的纯CSS菜单、相册效果等等。
或许用了这么久的伪类:hover，还有部分朋友还不完全了解hover的规则：

在CSS1中此伪类仅可用于a对象。且对于无href属性（特性）的a对象，此伪类不发生作用。
在CSS2中此伪类可以应用于任何对象。
但目前IE5.5、IE6仅支持CSS1中的:hover，不过新出的IE7是支持CSS2中的:hover。
当我们用伪类:hover做某些特殊效果时，依据CSS2很好完成，但为了现在占据主流浏览器的IE6，我们又不得不做很多工作，比如给添加a元素等来模拟完成最终的效果。
或许这样讲太空洞，请看下面一个常见的触发显示的例子（仅选择IE6为例讲解）。

我们先用CSS2的写法来实现：

XHTML部分

• 鼠标移过来触发我吧！哈哈，终于被你发现了！

代码：

* {margin:0; padding:0;}
ul {list-style:none;margin:100px;}
li {height:100px; width:100px; background:#000; font-size:12px; color:#fff; position:relative;}
li a {display:none;}
li:hover a{display:block; text-decoration:none;width:100px; height:100px; background:#c00; position:absolute; top:50px; left:50px; color:#fff;}

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

• 鼠标移过来触发我吧！哈哈，终于被你发现了！

大家可以测试发现在FF等对CSS2支持很好的浏览器中，可以显示我们所要达到的效果，但在IE6中却无法实现。

下面让我们换一种思维，所用CSS1的写法来看看，这个时候由于无法支持li元素:hover的使用，我们只好把所有文字包含到a中，对a使用:hover，并且将要显示隐藏的部分放到span元素中，首先我们对XHTML进行部分调整，调整如下：

XHTML部分：

• 鼠标移过来触发我吧！哈哈，终于被你发现

CSS中我们将a的设置成块级元素，并使a的大小和宽度和li的相同，并设置a为相对位置，用a来模拟上例中的li；而用span来模拟上例中的a，设置span在默认情况下隐藏（display:none;），当a被触发时（:hover），则span显示（display:block;）

CSS部分：

* {margin:0; padding:0;}
ul {list-style:none;margin:100px;}
li {height:100px; width:100px; background:#000; font-size:12px; }
li a {display:block; height:100px; width:100px; position:relative; color:#fff; text-decoration:none;}
li span {display:none; }
li a:hover span {display:block; width:100px; height:100px; background:#c00; position:absolute; top:50px; left:50px; color:#fff; }

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

• 鼠标移过来触发我吧！哈哈，终于被你发现

可我们发现上例中的效果，在IE6中依然无法显示，难道我们的代码写错了，可检查来检查去一点错误也没有（不信你找个高高手问问，他们依然会回答你，这代码完全正确），难道是标准中的说明是错的？还是IE6浏览器连CSS1也不支持？很多疑问从四面八方跑来了……

那到底是什么问题呢？

不是标准说明的错，也不是IE浏览器不支持CSS1，而是IE浏览器自身解析的问题，是IE5.5和IE6中伪类:hover的BUG。

那又该如何解决这个问题呢？

这个BUG可以通过在链接的属性中增加某些特殊的CSS属性声明来消除。

下面我们对上面的第二个例子进行实验，究竟哪些属性可以帮我们来消除这些BUG。

对CSS代码我们增加：
li a:hover {}

对其属性我们仅设定width:100px;发现在IE6中依旧没有变化，我们尝试着更改width的value，比如使其width:99px，奇怪的事情发生了，在IE6中，隐藏的部分在触发的时候显示出来了。我们再对li a:hover的属性仅设定color来测试（初始值为#fff），更改color值，发现在IE6下却也不能触发显示，奇怪，奇怪，真奇怪……是不是依旧是一头雾水……没关系，继续往下实验，或许归类了我们就能发现规律了！

我们再用其他属性进行设置：width，positon，background，text-decoration，font-size，font-weight，font-family，border，float，display，font-style，margin，padding，text-align，overflow，text-transform，text-indent，z-index，vertical-align。

我们发现除了text-decoration，color，z-index不能触发显示（对于不能触发显示的部分，可以还有某些遗漏的属性，欢迎朋友补充）外，其他属性均可以做为消除伪类:hover BUG的特定属性。

说明：
1、对于dispaly不可以用本例来测试，可另外写个更简单的例子（去除ul/li，a和span中的position）。在实际应用中怿飞不建议改变display值来做为特定属性消除此BUG，而且在某些例子中此属性不一定能消除BUG。
2、对于做为特定属性的border和background中的颜色我们还可用全写和简写来改变，如#fff和#ffffff在消除BUG中解析为2个不同的值。

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

• 鼠标移过来触发我吧！哈哈，终于被你发现

此帖源自：怿飞

Firefox下打开Qzone的导航的按钮焦点就无法点击，经过调试发现，三种情况混在一起使用的时候透明的flash导航的链接就出现异常了。

1. margin 设置了0px (一般的dom都默认是0)
2. overflow设置了 hidden, auto, scroll 其中一个
3. flash是设置了透明

[html]

[/html]
解决方案给设置了overflow的dom设置非0像素的margin,例如 margin:0.1px

IE3像素的问题不是经常被人发现的。因为它只是产生PX的位移。
大家看例子
[html]
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

段落A

段落B

[/html]

下面是贴出解决办法
[html]
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

段落A

段落B

[/html]