div+css 有importan使firefox和ie6兼容_css最高级jiimportan-优快云博客

本文链接：https://blog.youkuaiyun.com/happyxzxin/article/details/2573361

<html>

    <body>

        <div style="width: 300px; float: left; border: 1px solid red; font-size: 12px; clear: both;">

            按照margin的定义，margin中的距离应当是内部元素与外部元素之间的距离，下面的div的尺寸为width; 100px; margin: 100px;，总的宽度应该是width + 2 * margin，也就是300px，在Firefox中的效果正常。

        </div>

        <div style="border: 1px solid blue; float: left; clear: both;">

            <div style="border: 1px solid red; margin: 100px; float: left; width: 100px; height: 100px; font-size: 12px;">

                width: 100px;

                height: 100px;

                margin: 100px;

            </div>

        </div>

        <div style="width: 500px; float: left; border: 1px solid red; clear: both;">

            而在IE6中对于设置了float的元素，margin被重复计算了一次，总的宽度变成了width + 5 * margin，也就是500px。

        </div>

        <div style="clear: both; float: none;">

        </div>

        <div style="float: left; border: 1px solid red; height: 300px; width: 150px;">

            按照margin的定义，margin中的距离应当是内部元素与外部元素之间的距离，下面的div的尺寸为height; 100px; margin: 100px;，总的高度应该是height + 2 * margin，也就是300px，在Firefox中的效果正常。

        </div>

        <div style="border: 1px solid blue; float: left;">

            <div style="border: 1px solid red; margin: 100px; float: left; width: 100px; height: 100px; font-size: 12px;">

                width: 100px;

                height: 100px;

                margin: 100px;

            </div>

        </div>

        <div style="float: left; border: 1px solid red; height: 200px; width: 150px;">

            而在IE6中对于设置了float的元素，margin在下侧被少计算了一次，总的宽度变成了width + 1 * margin，也就是200px。

        </div>

        <div style="clear: both; float: none;">

            借助于padding样式和!important标记，可以实现Firefox与IE6的兼容效果。

        </div>

        <div style="border: 1px solid blue; float: left; clear: both; padding-bottom: 0px !important; padding-bottom: 100px;">

            <div style="border: 1px solid red; float: left; width: 100px; height: 100px; font-size: 12px; margin-top: 100px; margin-bottom: 100px; margin-left: 100px !important; margin-right: 100px !important; margin-left: 50px; margin-right: 50px;">

                width: 100px;

                height: 100px;

                margin: 100px;

            </div>

        </div>

    </body>

</html>