1. 爱易网页
  2. CSS教程
  3. 10个HTML和CSS代码修正IE6效果的方法

10个HTML和CSS代码修正IE6效果的方法

日期：2014-02-09　 浏览次数：21038 次

网页制造aiyiweb文章简介：处理IE6的bug的好方法或技巧

我们知道，IE6可能过不了多久就会消逝了，但是我们还能继续支持这个浏览器并且避免hack和有约束的CSS吗？这里是10个使用无效的HTML和CSS代码来修正IE6次要问题的方法。

1. 使用DOCTYPE

你应该在不断每个HTML文件的头部都使用DOCTYPE，并且我们推荐使用strict 版本，比如：

1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

或者，对于XHTML使用:

1

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

你需求处理的最棘手的事情就是IE6进入quirks模式——它曾经够诡异了。

2. 设置position: relative

将一个元素设置为”position:relative”可以处理很多问题，特别是你曾经遇到隐藏的或对齐诡异的盒子。显然，你需求非常小心点儿，由于绝对定位的子节点可能会因此重新定位。

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

具有margin属性的浮动元素可能惹起著名的IE6双倍margin问题，比如，你为一个元素指定margin-left为5px，但是IE6中实际上却表现为10px。”display:inline”将处理这个问题，虽然这不是必须的，你的CSS仍然是无效的。

4. 将一个元素设置为hasLayout

很多IE6(和IE7)的渲染问题可以通过设置元素的hasLayout来处理。 这是一个IE内部属性（IE隐藏的，更多关于haslayout的材料，可以参阅这里），用来确定绝对于其他元素，内容是如何规划和定位的。如果你需求设置一个inline元素(比如一个链接)为block元素，或者是使用通明效果，设置hasLayout也可能是必须的。

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

5. 修正反复文字bug

复杂的规划可以触发在浮动元素的最后一些字符可能出如今出如今清除元素下面的bug。这里有几个处理方法，有些是完满的，但是做一些反复试验也是必须的：

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

    		<!--[if !IE]>Put your commentary in here...<![endif]-->
  • 在容器的最后元素使用一个空的div(它也有必要设置宽度为90%或类似宽度。)

6. 在可点击和悬停的元素上只使用<a>标签

IE6只认识对a标签的CSS hover效果。

你也可以在基于JavaScript的组件内使用他们来控制，以使他们保持键盘的可操作性。是有一些可替代的选择，但是<a>标签比其它方案更可靠。

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

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

1
2
3
4
5

#element {
	min-height: 20em;
	
                    
                    


                    

                    



    

        
相关资料更多>

    

    

        
    

            
                  
    
                      
  1. 
                        知道吗？H1标签异样也可以美化
    2. 
                   
                
                  
    
                      
  2. 
                        CSS网页小技巧：隐藏input 内的文字的方法
    3. 
                   
                
                  
    
                      
  3. 
                        你的网页最好经过HTML校验和CSS校验
    4. 
                   
                
                  
    
                      
  4. 
                        css
    5. 
                   
                
                  
    
                      
  5. 
                        网页制造教程:css让页面居中对齐
    6. 
                   
                
                  
    
                      
  6. 
                        依据阅读器和分辨率不同自动调用CSS样式表
    7. 
                   
                
                  
    
                      
  7. 
                        Css Reset(复位)的复杂引见
    8. 
                   
                
                  
    
                      
  8. 
                        用CSS样式表缩写给你的网站减速
    9. 
                   
                
                  
    
                      
  9. 
                        如何管理CSS
    10.