DIV+CSS 常見問題及解決辦法整理

時間 2019-12-08

標籤 div+css div css 常見問題解決辦法整理欄目 HTML 简体版

原文原文鏈接

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.htmlcss

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

1. 【IE6】浮動雙倍邊距bug：瀏覽器

問題：同時使用「float」和「margin」，則margin在IE6下實際顯示爲雙倍。 app

解決：給浮動容器定義display:inline spa

demo:code

<!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值 = 最小值 htm

問題：IE6不認min-height，但hight=min-height。若只設定min-height，IE6下等於沒有高度；若只設定高度，IE6會自動將內容撐大。標準瀏覽器中固定高度值的容器是不會象IE6裏那樣被撐開的。 blog

解決： get

height: auto!important; /*使其餘瀏覽器高度自適應*/ it

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>