新人浅谈IE6兼容

近期对div+css进行了学习，遇到了一些关于IE6中存在的兼容性的问题，决定将我所遇到的IE6问题汇总一下，然后通过从网上查阅资料来补充一些经常会遇到的兼容性的问题以及如何解决的方法。

1.      对于IE浏览器和其它浏览器兼容问题我们需要使用到css hack技术：

p{

color:#00f;         /*通用* 蓝色/

color:#f0f\0;      /* IE浏览器 粉色 */

color:#f00\9;     /* IE浏览器6-10 红色 */

color:#f0f\9\0;  /* IE浏览器9-10 粉色 */

*color:#f00;       /* IE浏览器6-7 红色 */

}

2.      制作页面的时候，最小宽度的问题：针对要求占屏幕100%的div或者背景而言，除了需要设置width:100%;还需要给其div或背景图增加一个min-width：1200px; 的属性，保证其在IE中最大化窗口后可以正常显示，缩小窗口时仍然占满屏幕，不能出现背景图缺失。但是最小宽度在IE6下存在兼容问题，可以通过写：

.min_width{min-width:300px; _width:expression(document.body.clientWidth< 300 ? "300px" : "auto");}

_width: expression (this . offsetWidth < 150 ?"150px":"auto");

_width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"1000px":"");

三种方式尝试解决问题，但还存在一点点漏洞，需要深入学习；写完的页面需要放到小窗口里测试一下，注意自适应、百分比、最小宽度之类的问题；除了最小宽度问题同理可以引申出最大宽度和最小高度之类的问题：

最小宽度：div { width:100%; min-width:1000px; max-width:1200px;

width:expression_r(Math.max(1000,Math.min(1200,document.body.offsetWidth*0.99))+"px");

最小高度：div{min-height:100px; height : auto !important; height:100px;  overflow: visible; }

3.      在ul li下若要添加小圆点之类的东西，最好不要使用原始的list-style-type;因为如：在IE6下会将实心圆disc显示成空心圆，不稳定；可令list-style-type：none；然后用PS作出图片后添加背景图片，用例如：list-style-image: url(../images/logo00.jpg)；插图；

4.      PNG图出现的问题：在平时制作网页插入图片时经常会有一些关于图片格式以及IE6情况下的兼容问题。首先说说GIF和JPEG格式的两类图片的区别：GIF图片保存出来的图会比PNG图片边缘带的锯齿更明显一些，因此通常情况下我们是建议使用PNG图片的，但是png图片在IE6下背景并非是透明的，因此需要处理一些兼容性的问题，以下是我学习到的几种小方法：（1）最简单的一种方法就是在PS里保存PNG格式的时候尽量使用PNG-8，且加个描边之类的，减小锯齿的严重程度；（2）.对于兼容IE6css,可以专门针对IE6写一些语句，即属性前面带一个"_"即可；例如：_color:#333;_margin-top:20px；因此如果是在IE6中有PNG的背景图可以对IE6使用GIF背景图，对其它浏览器使用PNG背景图；例如：

.conimg{width:1200px;height:158px;margin-top:40px;background:url(images/liucheng_img.png) no-repeat; _background:url(images/liucheng_img.gif)no-repeat;}

（其中需要注意的是：background语句一定要写在_background语句之前，否则将无法实现在IE6下使用GIF图；）；（3）. 通过JS脚本实现判断浏览器版本问题（是IE6还是不是IE6），对IE6使用GIF格式图片；对其它浏览器使用PNG图片；代码如下：   

<scripttype="text/javascript">

varbrowser=navigator.appName

varb_version=navigator.appVersion

version=b_version.split(";");

vartrim_Version=version[1].replace(/[ ]/g,"");

if(browser=="MicrosoftInternet Explorer" && trim_Version=="MSIE6.0"){

alert("IE6.0");

$(".png").hide();

$(".gif").show();

} 

   else{ alert("非IE6.0");

   $(".png").show();

   $(".gif").hide();}  

   </script>

5.      IE6下兼容a标签的‘hover’属性，不兼容div->‘:hover'属性;因此，若想要实现当鼠标划过时的hover效果，可以通过写JS代码，例如：

<script type="text/javascript">

$(".entrance").hover(

function(){

$(this).addClass("entrhover")

} ,

function(){

$(this).removeClass("entrhover")

});

</script>

6. margin加倍的问题：ie6下，div设置为float时，左（右）margin会加倍。

解决方法：在这个div里面加上display:inline;

7.在table下设置padding值不起作用，若想要给table设置padding值，可以在

<table><tbody><tr>

<th></th>

<td></td>

</tr></tbody></table>中的th 或者td设置padding值，能达到在table下设置padding值的效果，具体原因有待学习；

8. IE6下，Important：当在同一个大括号里增加important时当前属性失效，当不在同一个大括号里时当前属性优先级最高; 以下是具体解释：  

IE6下，同一个大括号里对同一个样式属性定义，其中一个加important 则important标记是被忽略的，例：{background:red!important;background:green;}

IE6下解释为背景色green，其它浏览器解释为背景色red；

如果这同一个样式在不同大括号里定义，其中一个加important 则important发挥正常作用，

例：div{background:red!important}div{background:green}，这时所有浏览器统一解释为背景色red。

9．内联元素的padding对元素本身的范围是有作用的，但是水平方向占位，垂直方向不占位。内联元素的magin的水平方向有作用，垂直方向无作用。