DIV+CSS 常见问题及解决办法整理

http://blog.shaogroup.com/divcss-%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E5%8F%8A%E8%A7%A3%E5%86%B3%E5%8A%9E%E6%B3%95%E6%95%B4%E7%90%86.html

http://www.ituring.com.cn/article/64951

1. 【IE6】浮动双倍边距bug:

问题 :同时使用“float”和“margin”,则margin在IE6下实际显示为双倍。

解决:给浮动容器定义display:inline

 

demo:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>css 双边距问题</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .float-box {
            float: left;
            width: 150px;
            height: 150px;
            margin: 5px 0 5px 300px;
            /*display: inline;*/
            /*外边距的最后一个值保证了300像素的距离*/
        }

    </style>
</head>
<body>
<div class="float-box">
    双边距bug(IE6)
</div>
</body>
</html>

 

2. 【IE6】width和height值 = 最小值

问题:IE6不认min-height,但hight=min-height。若只设定min-height,IE6下等于没有高度;若只设定高度,IE6会自动将内容撑大。标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的。

解决:

height: auto!important; /*使其他浏览器高度自适应*/

height: 100px; /*针对IE6 最小高度*/

min-height: 100px; /*针对其他浏览器最小高度*/

 

demo

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>IE6 min-height 不认问题</title>
    <style>
        body {
            font-family: Arial, Helvetica, 宋体, sans-serif;
            font-size: 12px;

            text-align: center;
            background-color: #D4D5CC;
        }

        #wrapper {
            height: auto !important; /*使其他浏览器高度自适应*/
            height: 500px; /*针对IE6 最小高度*/
            min-height: 500px; /*针对其他浏览器最小高度*/
            width: 760px;
            background-color: #e5e5e5;
            border: 1px solid #fff;
            text-align: left;
            line-height: 150%;
            padding: 20px;
            margin: 10px auto;
        }
    </style>
</head>
<body>

<div id="wrapper">
    Hello World <br/> 
    Hello World <br/> 
    Hello World <br/> 
    Hello World <br/> 
    Hello World <br/> 
    Hello World <br/>
</div>
</body>
</html>

 

3. 【IE6】为什么无法定义1px左右高度的容器?

问题:这是因为默认的行高造成的

解决:(选择一种)

①、overflow:hidden;

②、zoom:0.08;

③、line-height:1px;

 

demo:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>IE6 div 不能实现1px 高度的几种解决方法</title>
    <style>
        .test {
            font-size: 0px;
            height: 1px;
            line-height: 1px;
            background-color: red;
        }

        .test2 {
            height: 1px;
            overflow: hidden;
            background-color: red;
        }

        /*.test3 {*/
            /*height: 1px;*/
            /*zoom: 0.08;*/
            /*background-color: red;*/
        /*}*/
    </style>
</head>
<body>
<div class="test">&nbsp;</div>
<div class="test2"></div>
<div class="test3"></div>
</body>
</html>

 

4. 【IE6】mirror margin bug

问题:当外层元素内有float元素时,外层元素如定义margin-top:14px,将自动生成margin-bottom:14px。 padding也会出现类似问题

解决:外层元素设定border 或 设定float。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。