浏览器兼容性问题积累

1.一个块级元素，设置了float left or right，如果又对它设置水平margin值，如margin-left margin-right，在IE6下间距会比设的这个值大。

解决方案：该块级元素加hack: _display:inline;

demo：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #test{
            width: 50px;
            height: 100px;
            background: red;
            float:left;
            margin-left: 10px;
        }
        #wrapper{
            background: blue;
            width: 200px;
            height: 200px;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="test"></div>
    </div>
</body>
</html>

2. 一个元素设置高度为较小的高度(一般小于10px)，在ie8一下的浏览器展现的高度会高于设置的小高度。

解决方案：在这个元素上设置hack：*overflow:hidden。（或者*line-height:一个小于小高度的高度值，但我试了一个这个方法并不ok）

问题产生的原因是低端浏览器会给元素设置一个默认的line-height值。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        .demo{
            width: 30px;
            height: 2px;
            background: red;
            *overflow: hidden;
        }
    </style>
</head>
<body>
<div class="demo"></div>
</body>
</html>

3.很多图片排列在容器中，在不同的浏览器展示下会有不同的间隙。

解决方案：float

<!DOCTYPE html>
<html>
<head>
    <title>demo3</title>
    <style>
        img{
            border: 1px solid gray;
            float:left;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <img src="./image/img1.jpg"/>
        <img src="./image/img1.jpg"/>
        <img src="./image/img1.jpg"/>
        <img src="./image/img1.jpg"/>
        <img src="./image/img1.jpg"/>
    </div>
</body>
</html>

4.min-height 的浏览器兼容

min-height这个属性在ie6下是不兼容的，这个时候还是需要hack来帮忙。

解决方案：_height:设定的最小高度值

【js】

1.SCRIPT1028: 缺少标识符、字符串或数字

json字符串如果最后一项多加了逗号，像这样

var data = {

a : 'a',

b : 'b',

};

ie6 ie7 搜狗兼容模式会报的bug