浏览器在css样式 的一些小差别案例1（菜鸟版 简单易懂）

1、IE6.0的div的内嵌div可以把父级的高度撑大，而FireFox不可以，要自己设置高度。

2、当设置为三列布局时，IE6.0的float宽度不能达到100％，而FireFox可以。当设置为两列布局时，两种浏览器都可以。

3、在火狐浏览器中，非float的div前面有同一父级的float的div，此div若有背景图，要使用clear：both，才能显示背景图，而IE6.0中不用使用clear：both。
4、在[text-decoration:underline]的属性下，IE6.0显示的下划线会比FireFox低一点。在FireFox中，部分笔画会在下划线的下面1个象素左右。
火狐浏览器:链接加边框和背景色，需设置display:block,同时设置float:left保证不换行。
火狐浏览器:设置padding后,div会增加height和width,但IE不会,故需要用!important多设一个height和width
火狐浏览器:div设置margin-left,margin-right为auto时已经居中,IE不行
下面有一小段代码

这是我一个同学写的

        <div class="search">
            <input type="text" value="Search places">
            <div class="stb"><img src="image/r14(hover).png" alt=""></div>
        </div>

下面是其css样式

.search {
    width: 469px;
    height: 136px;
    float: left;
    margin-top: -136px;
    margin-left: 142px;
    clear: left;
}
.search input{
    width: 469px;
    height: 50px;
    border: none;
    outline: none;
    color: #a3a3a3;
    font: 21px 微软雅黑;
    border-bottom: 2px solid #e4e4e4;
    margin-top: 38px;
    margin-left: 60px;
    float:left;
    clear: left;
}
.search img{
    float: right;
    margin-top: -35px;
    margin-right: -50px;
    clear: right;
}

这段代码是一个输入框以及一个图片的搜索按钮，在谷歌浏览器上运行时能正常显示，但是在IE以及火狐上面图片搜索按钮都会处于body的上方的外面。

之所以会这样，是应为在这段代码之前的一个div没有使用float而单独占据一行，而要求是之前的div应该和input以及img按钮在同一行的。那么为了达到在同一行的效果，所以在css中进行了相关属性值的调整，最总能够在谷歌浏览器中正常显示，而由于ie和火狐的内核与谷歌不一致的缘故，margin等属性的解释不一样导致在三种浏览器中产生了不同的显示结果。

这就是一种兼容性的问题，为了避免这类问题，应该尽量使用规范通用的代码。

针对这个案例，最好的方法就是将在其之前的div也设置  floa： left  属性。margin，padding 都预先设为 0；然后在进行调节。

 

转载于:https://my.oschina.net/xiazilailai/blog/291119