內容比較多，難免有些問題，代碼或是哪裏有問題，儘管提出，2016-11-19

output is the best input

寫給自己也寫給他人

一、工作問題

1.1按鈕要有效果：

按鈕：懸浮到按鈕時，顏色發生改變，且鼠標指針變成小手。

// 手指屬性。
cursor: pointer;
// 或用
<a href="javascript:void(0);"></a>

1.2、input輸入框：

1.2.1、

左邊要有padding，不然輸入文字緊貼左邊。

1.2.2、

input設置checkbox或者radio時經常不能垂直對齊。

// 可以在input上加個下邊屬性（像素自己調節，但是這個常上出現調好了某個瀏覽器，到另一個就壞了）：

    vertical-align: -2px;

// 或這樣不過都很難完全滿足所有瀏覽器
input {
    vertical-align: middle;
    margin: -4px 2px 0 2px;
}

1.3、背景圖：

1.3.1、

背景要設置no-repeat，避免大屏幕下，出現重複。

1.3.2 、

背景屬性儘量簡寫。

background: #eee url() no-repeat center top;

1.3.3、

背景圖片時補救色：

當圖片不加載時或沒有覆蓋全時，有背景顏色補救。所以有的時候即使有圖片也需要加背景色。例如：下邊兩個背景圖（因爲它是白色還好），假如是個其他的顏色，它本身有個漸變的過程，顏色會趨於一個固定的顏色。當你切圖時不用把漸變穩定後的部分切下來，而是採用背景色填充即可。

1.3.4、

利用背景顏色可以解決一些難以實現的佈局。

效果圖：

切的圖：這裏有個問題：這是移動端，要保證適配，所以如果把下邊的弧度切下來，當你做頁面時不管用img還是url的方式都很難保證適配和保證內容不超出圖片（要展示三條中獎信息，而內容有更長的）。所以切瞭如下的圖，然後在米色的空白處定了一個div寬度用%定位到中間，背景色設置爲米色，這樣內容在div內，不管多少內容，都會把div撐高（div背景也是米色，不會出現內容溢出米色背景），div的左下右下的border設置爲radius即可。

1.3.5、

工作中儘量將小圖標採用精靈圖（又叫雪碧圖）,減少http請求，提升用戶體驗。用ps自己做個，把小圖標都放上去，不要背景色。也可以用工具。

// 通過背景定位，來挪動背景圖片，以達到顯示自己想要的圖片。
background-position: -20px -10px;

1.3.6、關於backgound和img

一些小圖標（這些圖片基本是不用改變的，不是產品圖片，每當上新品了，就得換新圖片），用背景雪碧圖，減少加載次數。而img多數用來需要不斷改變的圖片。因爲後端應用起來比較方便。

1.4、適當的文字提示：

在有寫限制寬度的地方要給出字數提示

1.5、清除浮動：

解決父元素因子元素浮動而產生高度塌陷問題。主要推薦第一種，可用前三種，後幾個知道就行。

// 清楚浮動1: 父元素設置:after+++++++++++++++++++++++++推薦
// 優點：瀏覽器支持好、不容易出現怪問題，主流清楚浮動方式。
// 缺點：在浮動佈局較多的情況下，可能需要寫大量的類名。（例如：li內部採用了浮動佈局）
.float {
    float: left;
    width: 30px;
    height: 40px;
    background-color: rebeccapurple;
}
.clearfix:after{
  content: "020"; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;  
  }
.clearfix {
  /* 觸發 hasLayout （IE）*/ 
  zoom: 1; 
  }

// float是浮動的子元素，父元素不清除浮動將沒有高度
<div class="clearfix">
    <div class="float"></div>
</div>


// 清除浮動2: 子元素結尾加空標籤+++++++++++++++++++++++++++++
// 優點：簡單、代碼少、瀏覽器支持好、不容易出現怪問題 
// 缺點：多餘標籤，不符合語義化。
.float {
    float: left;
    width: 30px;
    height: 40px;
    background-color: rebeccapurple;
}
.clear {
    clear: both;
}

//
    <div>
        <div class="float"></div>
        <div class="clear"></div>
    </div>


// 清楚浮動3: 父元素設置overflow: hidden;或者auto  ++++++++++++++++++++
// 優點：簡單
// 缺點：當遇到絕對定位時（或者下拉列表時），可能會出現內容被隱藏或者出現滾動條。
.float {
    float: left;
    width: 30px;
    height: 40px;
    background-color: rebeccapurple;
}
.parent {
    overflow: hidden;
}

// 
    <div class="parent">
        <div class="float"></div>
    </div>

// 只做瞭解：
// 4.父元素也浮動。5.還可以設置父元素高度。 6.父元素display: table; 8.結尾加<br class="clear">

二、兼容問題

2.1、IE兼容性問題：

2.1.1、浮動的 li 3px高度問題

但是實際上好像不是3px，會因情況改變。

條件1：
li的子元素設置了浮動（例如：本例中的span設置了左浮動）。

條件2：
(IE6/7)li設置了width、height、zoom 之一。

滿足上述兩個條件了，就可以呵呵呵了。

      .fl {
        float: left;
      }
      li {
        background-color: black;        
        height: 10px;
      }

    <ul>
        <li class="select"><span class="fl"> sffaafs</span></li>
        <li class="select"><span class="fl"> sfaafafs</span></li>
        <li class="select"><span class="fl"> sfsfsfafs</span></li>
        <li class="select"><span class="fl"> sffdfsfafs</span></li>
        <li class="select"><span class="fl"> sffafjhkafs</span></li>
    </ul>

解決方法：

// 1、別讓li獲得layout
// 2、設置li {vertical-align：middle} （推薦這種方法，簡單方便）
// 3、設置li{float:left;width:100%}
// 4、給文本結尾處加空格符。（這和下面的一個問題處理方式相似,使用<li>包含一個塊級子元素時和一個浮動元素時，IE7會錯誤地給每條列表元素之間添加空隙。 2.5）

// 方法4代碼
    <ul>
        <li class="select"><span class="fl"> sffaafs</span>&nbsp;</li>
        <li class="select"><span class="fl"> sfaafafs</span>&nbsp;</li>
        <li class="select"><span class="fl"> sfsfsfafs</span>&nbsp;</li>
        <li class="select"><span class="fl"> sffdfsfafs</span>&nbsp;</li>
        <li class="select"><span class="fl"> sffafjhkafs</span>&nbsp;</li>
    </ul>

2.1.2、 dispplay：inline-block；多個行內塊存在5px距離。

（div本身是塊元素，span本身是行元素。）體會下邊代碼，當我把父元素span變成div將會發生改變。

當父輩爲塊級元素或行內塊時，超出的父元素的寬度會優先換行，當父元素是行內元素時，超出會溢出。

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="author" content="劉永順">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            .out {
                width: 814px;
                height: 100px;
            }

            .text {
                display: inline-block;
                width: 200px;
                height: 50px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <span class="out"> 
            <span class="text"></span>            
            <span class="text"></span>
            <span class="text"></span>
            <span class="text"></span>
        </span>
    </body>
</html>

// 解決方法： display:block;float: left;

2.1.3、IE7不支持display:inline-block;兩個行內塊會換行。

2.1.4、 IE7 下js代碼，無法用數組下標的方式訪問。

var str = "apple";
console.log(str[0]);  // ie7中輸出爲undefined

// 解決方法

1 var str="apple";
2 console.log(str.charAt(1));  // 輸出a
3 console.log(str.substring(0,1));  // 輸出a
4 console.log(str.slice(0,1));  // 輸出a

2.2、z-index研究

2.2.1、首先你要知道兩點：

z-index要想用就必須有定位，absolute，fix，relative。
html文檔渲染時是從上到下，下邊的標籤會覆蓋到上邊。

2.2.2、理解第2點，html渲染。

// 理解渲染： 當兩個div都在文檔流裏時，對後邊的div設置margin-top：-30px;會發現綠色的覆蓋了紅色。
        .top,
        .bottom {
            height: 200px;            
        }
        .top {
            width: 300px;
            background-color: red;
        }
        .bottom {
            width: 200px;
            margin-top: -30px;
            background-color: green;
        }
        //
        <div class="top"></div>
    <div class="bottom"></div>

2.2.3、下邊是關於z-index的展現情況（一個有子元素，一個沒有）

body {
    margin: 0;
}
.out {
    position:relative;
    top: 200px;
    left: 350px;
    height: 50px;
    width: 200px;
    background-color: blue;
}
.in {
    top: 10px;
    left: 30px;
    height: 30px;
    width: 160px;
    background-color: green;
    position:absolute;
    z-index:1;  //
}
.out1 {
    position:absolute;
    top: 140px;
    left: 430px;
    height: 200px;
    width: 50px;
    background-color: yellow;
}
//
        <div style="" class="out">1
            <div style="" class="in">2</div>
        </div>
        <div style="" class="out1">3</div>

多數情況：

IE7 情況：

2.2.4、再看另一段代碼（兩個父元素，每個父元素分別帶着兩個子元素）

        .parent,
        .parent1 {
            width: 200px;
            height: 200px;
            position: absolute;
        }
        .parent {
            background-color: red;
        }
        .parent1 {
            left:80px;
            top:80px;
            background:black;
        }       
        .sub-last,
        .sub1-last,
        .sub1-first,
        .sub-first {
            position:absolute;
            text-align: right;
            font: 15px Verdana;
            width: 100px;
            height: 100px;
            color: white;
        }
        .sub-first {
            left: 20px;
            top: 20px;
            background-color: green;
            z-index: 15;
        }       
        .sub-last {
            left: 50px;
            top: 70px;
            z-index:10;
            background:orange;
        }

        .sub1-first {
            left: 40px;
            top: 40px;
            z-index:5;
            background:blue;
        }
        .sub1-last {
            width: 140px;
            height: 160px;
            left: 30px;
            top: 20px;
            z-index:1;
            background:mediumpurple;
        }
        //
    <div class="parent">
        <div class="sub-first">z-index15</div>
        <div class="sub-last">z-index10</div>
    </div>
    <div class="parent1">
        <div class="sub1-first">z-index5</div>
        <div class="sub1-last">z-index1</div>
    </div>

多數情況：

IE7 情況

// 當你在.parent上加  z-index: 1; 和z-index: 2;和z-index: 6;  時，情況就各不一樣了。

　2.2.4.1、類名爲.parent 的設置 z-index: 1;

多數情況：

IE7情況：

　2.2.4.２、類名爲.parent 的設置 z-index: 2;

多數情況：

IE7情況：

總結：

多數情況：

1、 .parent和.sub1-last都是z-index: 1;但是由於後者在html文檔中排在下邊，所以渲染靠後，才產生了後者（紫色）覆蓋前者（紅色），因爲綠色和橙色都是紅色的子元素，導致即使z-index比紫色和藍色大但還是被覆蓋了。（這裏可以理解爲子元素的z-index都是相對於父元素的，它永遠不能超出父元素，也永遠不能低於父元素，即使z-index比父元素小。）

IE7情況：

1、父元素（紅色）內的子元素的z-index不會與父元素（黑色）內的子元素的z-index產生影響，而是完全取決於父元素的比較。（即誰的爹高，誰就高。）

例子：

<body>
    // （類比彈窗標籤）layer 彈窗插件，就是類似原理， .in這個位置是彈窗，需要預先寫好。.out就是出現問題的標籤。
    <div class="out">
        <div class="in">
        </div>
    </div>

    //（類比layer的遮罩層） 這裏是遮罩層，點擊後觸發生成，這是由js創建的，並且會生成爲body的子元素。
    <div class="mask"></div>
</body>

當對.out 設置定位時（relative or absolute）。IE7下mask將遮蓋彈出，儘管.in的z-index： 2222；卻還是出現了被覆蓋的情況，只因爲.mask覆蓋了.out 。（如下樣式）

.out {
    position: absolute;
}
.in {
    position: absolute;
    width: 200px;
    height: 100px;
    background-color: yellow;
    z-index: 2222;
}
.mask {
    position: absolute;
    width: 100%;
    height: 800px;
    background-color: black;
    opacity: 0.3;
    filter: alpha(opacity=30);
    z-index: 3;
}

如下圖：

在應用layer彈窗時大家遇到了可以注意一下。想必試過如上代碼後以前的z-index的問題也應該可以理解。.out 不設置定位就可以避免了。

２.３、 IE下option的click事件。

    <select id="select" multiple>
        <option class="opt" value="0">0000000</option>
        <option class="opt" value="1">1111111</option>
        <option class="opt" value="2">2222222</option>
    </select>

    $(document).ready(function(){
        $("#select option").click(function(){
            alert($(this).text());
        });
    });

解決：

$("#select").click(function(){
    var $opt =$(this).find('option:selected');
    alert($opt.text());
});

2.4、 IE7 浮動後margin-bottom失效。

.out {
    width: 200px;
    background-color: green;
    overflow: hidden;
}
.in {
    float: left;
    width: 150px;
    height: 200px;
    margin-top: 30px;
    margin-bottom: 40px;
    background-color: red;
}
.subling {
    width: 200px;
    height: 100px;
    background-color: yellow;
}
// 解決代碼加一個清除浮動的div標籤
.clear {
    clear: both;
}
//
    <div class="out">
        green
        <div class="in">red</div>
        <div class="clear"></div>
    </div>
    <div class="subling"></div>

多數情況：

IE7情況：

解決：

添加一個清除浮動的div標籤，這裏就引申到了另一個問題，爲什麼清楚浮動，和清除浮動的方法，在上面我們可以看到一個問題，overflow: hidden;在IE7下只是解決了高度塌陷問題，但是卻解決不了，margin-bottom的問題。所以說合理的清除浮動很關鍵。

2.5、 IE7浮動後出現margin-bottom加倍。

        .out {
            width: 300px;
            overflow: auto;
            margin: 0 auto;
            background: red;
        }       
        .up {
        // 解決辦法1：up也浮動起來。
            /*float: left;*/
            width: 300px;
            height: 40px;
            background: yellow;
            margin-bottom: 10px;
        }       
        .down {
            width: 200px;
            height: 60px;
            float: left;
            background: blue;
        }
        //
    <div class="out">
        <div class="up">nei</div>
        <div class="down"></div>
        // 解決辦法2該位置加個空格符：&nbsp;
    </div>

多數情況：

IE7情況：

解決：

1、子元素up也浮動起來。

2、在子元素down後面加個空格符號。

2.6、 IE7下overflow: hidden 無法隱藏relative的子元素

.parent {
    overflow: hidden;
    width: 300px;
    height: 200px;
    background-color: green;
}
.sub {
    position: relative;
    width: 400px;
    height: 190px;
    background-color: red;
}

//
    <div class="parent">
        <div class="sub"></div>
    </div>

liuyongshun2

發佈了42 篇原創文章 · 獲贊 8 · 訪問量 4萬+

私信關注

IE7兼容and工作總結

一、工作問題

1.1按鈕要有效果：

1.2、input輸入框：

1.2.1、

1.2.2、

1.3、背景圖：

1.3.1、

1.3.2 、

1.3.3、

1.3.4、

1.3.5、

1.3.6、 關於backgound和img

1.4、適當的文字提示：

1.5、清除浮動：

二、兼容問題

2.1、IE兼容性問題：

2.1.1、 浮動的 li 3px高度問題

2.1.2、 dispplay：inline-block；多個行內塊存在5px距離。

2.1.3、IE7不支持display:inline-block;兩個行內塊會換行。

2.1.4、 IE7 下js代碼，無法用數組下標的方式訪問。

2.2、z-index研究

2.2.1、 首先你要知道兩點：

2.2.2、 理解第2點，html渲染。

2.2.3、 下邊是關於z-index的展現情況（一個有子元素，一個沒有）

2.2.4、 再看另一段代碼（兩個父元素，每個父元素分別帶着兩個子元素）

2.2.4.1、 類名爲.parent 的設置 z-index: 1;

2.2.4.２、 類名爲.parent 的設置 z-index: 2;

２.３、 IE下option的click事件。

2.4、 IE7 浮動後margin-bottom失效。

2.5、 IE7浮動後出現margin-bottom加倍。

2.6、 IE7下overflow: hidden 無法隱藏relative的子元素

1.3.6、關於backgound和img

2.1.1、浮動的 li 3px高度問題

2.2.1、首先你要知道兩點：

2.2.2、理解第2點，html渲染。

2.2.3、下邊是關於z-index的展現情況（一個有子元素，一個沒有）

2.2.4、再看另一段代碼（兩個父元素，每個父元素分別帶着兩個子元素）

　2.2.4.1、類名爲.parent 的設置 z-index: 1;

　2.2.4.２、類名爲.parent 的設置 z-index: 2;