武冈论坛官方博客

  :hover伪类在IE6中的BUG
  :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部分：
  
  <ul>
  <li>鼠标移过来触发我吧！<a href="#" title="">哈哈，终于被你发现了！</a></li>
  </ul>
  CSS部分：
  
  *{
  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;
  }
  大家可以测试发现在 Firefox 等对 CSS2 支持很好的浏览器中，可以显示我们所要达到的效果，但在 IE6 中却无法实现。
  
  下面让我们换一种思维，所用 CSS1 的写法来看看，这个时候由于无法支持 li 元素 :hover 的使用，我们只好把所有文字包含到 a 中，对 a 使用 :hover ，并且将要显示隐藏的部分放到 span 元素中，首先我们对 XHTML 进行部分调整，调整如下：
  
  XHTML部分：
  
  <ul>
  <li><a href="#" title="">鼠标移过来触发我吧！<span>哈哈，终于被你发现</span></a></li>
  </ul>
  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;
  }
  可我们发现上例中的效果，在 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 的特定属性。
  
  说明：
  
  对于 dispaly 不可以用本例来测试，可另外写个更简单的例子（去除 ul/li，a和span中的position ）。在实际应用中怿飞不建议改变 display 值来做为特定属性消除此 BUG，而且在某些例子中此属性不一定能消除 BUG。
  对于做为特定属性的 border 和 background 中的颜色我们还可用全写和简写来改变，如 #fff 和 #ffffff 在消除 BUG 中解析为 2 个不同的值。
  
  文章转摘自：PlanABC - 怿飞’s Blog
  
  原文地址：http://www.planabc.net/2007/02/15/ie_hover_bug/

  浮动引起的文本重影

  在做项目开发时遇到了一个怪异现象“整段内容被重影”的问题，一般来说这类问题在IE6中表现的比较多，但这次出人意料的是IE7也殃及在内。在早前互联网上就有分享过使用HTML注释会引起类似的文字倒影问题，但此时的页面却是没有任何注释～，持续地测试分析问题变得越来越有趣了…
  
  
  测试结果为当不适当地使用float:left/right; width:100%; display:none;CSS属性值及相应的HTML结构做组合，会引发在IE中的七种怪异问题，此问题在中文及英文字体均会出现。详细如下例：
  阅读约定：
  cont1是指：<p class=”cont1″>ABCDEFG</p>
  cont2是指：<p class=”cont2″>1234567</p>
  一、相等长度的文本消失在IE6中，cont1与cont2字符长度相同时，文本会消失，且容易引起浏览器IE6崩溃。
  
  但改变浏览器窗口尺寸时内容会再次显示。
  注意：测试了IE Collection的：6.0.2900.5512.xpsp_sp2_qfe.090206-1239IC版本出现此问题
  DEMO：http://blog.gulu77.com/demo/200908/float/a1.html
  
  
  
  二、当浏览器宽度少于内容宽度文本会消失在IE6中，当浏览器宽度少于内容宽度文本会消失，且容易引起浏览器崩溃。
  但改变浏览器窗口尺寸时内容会再次显示。
  注意：测试了IE Collection的：6.0.2900.5512.xpsp_sp2_qfe.090206-1239IC版本出现此问题
  DEMO：http://blog.gulu77.com/demo/200908/float/a2.html
  
  
  
  三、相等长度文本重影在IE6中，cont2比cont1多出一个字符时，内容会被重映为相等长度的文本，且容易引起浏览器IE6崩溃。
  DEMO：http://blog.gulu77.com/demo/200908/float/b1.html
  
  
  
  四、当浏览器宽度少于内容宽度文本会重影在IE6中，cont2比cont1多出一个字符时,且浏览器宽度拉伸至小于内容宽度文本会完全重影。
  
  此问题与第三个对比在于一个不需要拉伸，一个需要拉伸。
  DEMO：http://blog.gulu77.com/demo/200908/float/b2.html
  
  
  
  五、文本的倒序重影在IE6中，cont2比cont1多出两个字符或以上时文本会被倒序重影，且容易引起浏览器IE6崩溃。
  规律为:重影字符数 = cont1的字符数 + 1个字符数
  DEMO：http://blog.gulu77.com/demo/200908/float/c1.html
  
  
  
  六、内联元素引起的文本重影在IE6中，浮动元素之间有不含内容的内联元素的标签（指内联标签或CSS模拟的内联标签）后会引起文本重影。
  规律为:重影字符数 = 内联元素数量 * 2字符数 – 1个字符数
  DEMO：http://blog.gulu77.com/demo/200908/float/d1.html
  
  
  
  七、内联元素引起的IE6/7文本重影与消失与第六的《内联元素引起的文本重影》类似，但在cont2后面添加了一个内联元素后会导致IE7也出现重影BUG。
  而内联元素相加超出cont2字符数时，IE7表现正常，IE6则表现为消失。
  规律为:重影字符数 = <span>数量 * 2字符数 – 1个字符数
  DEMO：http://blog.gulu77.com/demo/200908/float/e1.html
  
  而内联元素相加超出cont2字符数时，IE7表现正常，IE6则表现为消失。
  注意：测试了IE Collection的：6.0.2900.5512.xpsp_sp2_qfe.090206-1239IC版本出现此问题
  规律为:重影字符数 = <span>数量 * 2字符数 – 1个字符数
  DEMO：http://blog.gulu77.com/demo/200908/float/e2.html
  
  
  
  总结围绕着float加width列出的种种问题，下面列举一些解决的方法，也期待分享你的解决方案，在此不胜感谢：
  

    
•       避免float:left/right;与width:100%;同时使用。
    
•       对于例子中的display:none;可以使用visibility:hidden;代替。
    
•       尽量减少使用float进行布局，从目前的经验看来float是种种奇怪问题的根源所在。
  

  大多数人可能认为,设置元素的vertical-align:middle可以让行内元素在父元素中垂直居中,但在网页开发中发现不是这样,我最近参考了w3c的标准发现,middle值会把行内元素框的中与与父元素基线上方0.5ex处的一个点对齐,这里的1ex也是相对于父元素定义. 以下是制作的一个图,供大家了解.