工做遇到問題的解決方案

css

• line-height 在google和fire 有一像素誤差
• display-inline-block 對齊方式有問題 用 vertical-align:middle
• select option 只有火狐支持 onclick 解決辦法 就是迷你select下拉菜單

$(this).find('option:selected').val();

• 安卓和IOS position fiexd 不同 安卓沒有問題 IOS 動態設置 absolete 模擬fixed

display: flex;
align-items: center;
justify-content: center;

用這個寫在外圍，裏面的盒子就能圖文上下左右居中

&::after{
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 1px;
    content: '';
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    background-color: #e2e2e2;
}
<!--寫出Boder底部0.5px的線-->

水平垂直居中 盒子

<div class="box">
    <div class="con"></div>
</div>

<style type="text/css">
    .box {
        width: 300px;
        height: 300px;
        background: #111;
         display: flex;
         align-items: center;         /* 垂直居中 */
         justify-content: center;    /* 水平居中 */
    }
    .box .con {
         width: 100px;
         height: 100px;
         background-color: #fff;        
    } 
</style>

fixed 與 input

剛接觸移動端 Web 開發的小夥伴應該都會聽前輩們說過，不要在有 input 標籤的頁面使用 fixed 定位，由於這二者在一塊兒的時候，老是會有奇奇怪怪的問題。

在 iOS 上，當點擊 input 標籤獲取焦點喚起軟鍵盤的時候，fixed 定位會暫時失效，或者能夠理解爲變成了 absolute 定位，在含有滾動的頁面，fixed 定位的節點和其餘節點一塊兒滾動。

其實這個問題也很好解決，只要保證 fixed 定位的節點的父節點不可滾動，那麼即便 fixed 定位失效，也不會和其餘滾動節點一塊兒滾動，影響界面。

可是除此以外，還有不少坑比較難以解決，例如 Android 軟鍵盤喚起後遮擋住 input 標籤，用戶無法看到本身輸入的字符串，iOS 則須要在輸入至少一個字符以後，才能將對應的 input 標籤滾動到合適的位置，因此爲了避開這些難以解決的坑，在有表單輸入的頁面，儘可能用absolute 或者 flex 替換 fixed。

ajax 緩存

1.ajax緩存只對GET方式的請求有效，而瀏覽器認爲POST請求提交表單內容一定有變化，因此不走緩存。

2.在默認的狀況下，通常發送ajaxget請求，IE瀏覽器第一次會向服務器端請求，獲取最新數據，若是地址和參數不變，第二次及之後再發送請求，

它就默認獲取的緩存數據，這樣的問題是ie中很常見的問題，通常POST則 認爲是一個 變更性 訪問 （瀏覽器 認爲 POST的提交 一定是 有改變的）