浏览器兼容一

（一）浏览器间padding设置的影响

1．建一个div元素class名为demo1

<divclass="demo1">    

</div>

.demo1 {

                width: 100px;

                height:50px;

                border: 1px solid blue;                

            }

 firefox,chrome包括边框在内的宽度是102px，IE7,8包括边框在内的宽度为100px;

 

2.添加padding属性，看两个浏览器的效果

.demo1 {

                width: 100px;

                height:50px;

                border: 1px solid blue;

                padding:5px;

            }  

添加padding以后firfox,chrome下宽度为112px，IE7，IE8不变为100px;

1.      在demo1内添加一个div看是什么效果

<divclass="demo1">     

        <divclass="demo11"></div>

    </div>

添加样式：

.demo1 {

            width: 100px;

            height:50px;

            border: 1px solid blue;

            padding:10px;

            }  

        .demo11{

            width:70px;

            height:25px;

            background-color:red;

        }

 

2.      将demo11的宽度修改为120px，再看效果

.demo1 {

            width: 100px;

            height:50px;

            border: 1px solid blue;

            padding:10px !important;

            }  

        .demo11{

            width:120px;

            height:25px;

            background-color:red;

}

firefox,chrome中子元素的宽度大于父元素的宽度时，父元素宽度不变，而IE则会随着子元素的宽度自动增长，另外这时候IE的宽度为144px=120px+20px+20px+1px+1px=demo11的width+padding-left+padding-right+border-left+border-rifht;也就是说当子元素的宽度大于父元素的宽度时，父元素的宽度要加上内外边框的宽度.

（二）float设置的影响

1. <divclass="demo1"> 

       <divclass="demo11"></div><divclass="demo12"></div>

    </div>

样式：

.demo1 {

            width: 200px;

            height:80px;

            border: 1px solid blue;

       }

.demo11{

            float:left;

            width:70px;

            height:25px;

            background-color:red;

            margin:5px;

        }

.demo12{

            width:80px;

            height:25px;

            background-color:green;

            margin:5px;

        }

2.可以看到IE下会把浮动元素后面的元素在同一行排列，火狐和谷歌浏览器则在同行其实位置开始排列。使浏览器下显示跟IE一致，可以在. demo12内添加float:left;

.demo12{

            float:left;

            width:80px;

            height:25px;

            background-color:green;

            margin:5px;

        }

3.上面的效果看四个浏览器显示的样子是完全一样的，但是出现一个问题，就是四个浏览器中红色和绿色快之间的距离多出了2px;这是浮动元素造成的问题，这时候要在.demo11内添加margin-right:3px;浮动元素经常造成类似的距离增加的问题，实际项目的时候要适当的做调整。

（三）ul,ol缩进

<divclass="demo">

        <ulclass="u1">

          <li>Coffee</li>

          <li>Tea</li>

          <li>Milk</li>

        </ul>

</div>

样式：

<style>

        .demo{

            width:100px;

            height:100px;

            border:1px solid blue;

        }

       

</style>

看一下这段样式在不懂浏览器之间的效果：

 

ul和ol的缩进在IE和firefox,chrome之间是有区别的，消除浏览器之间的缩进并且去掉圆点标注可以添加以下样式：

.u1{

            list-style:none;

            margin:0px;

            padding:0px;

        }

在IE中，设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点，设置padding对样式没有影响；在 Firefox 中，设置margin:0px仅仅可以去除上下的空白，设置padding:0px后仅仅可以去掉左右缩进，还必须设置list- style:none才能去除列表编号或圆点。也就是说，在IE中仅仅设置margin:0px即可达到最终效果，而在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。