【css】使用display flex時圖片高度會拉高的問題

當某容器(.container)使用display:flex屬性且容器高度為100%時，發現內部的<img>標籤圖檔高度也會自動延伸拉高為100%，只要在.container上加上下面標註的兩個屬性就可修正

.container{ 
width: 970px;
height: 100%;
display: flex;
align-items:flex-start;
align-content:flex-start;
}

關於jquery使用on('click')然後append出來的按鈕的dom操作無法作用問題. click to append buttons cannot access with dom.

狀況：按鈕上使用on('click')函式想要在點擊後append出一個按鈕

html內有一個class為btn的案鈕

<a href="#">test button</a>

在script內加入以下語法

$('.btn').on('click',function(e){
    e.preventDefault();
    $('body').append("<a href='#' class='btn'>append a button</a>");
})

原本是希望點擊第一個btn能夠append出第二個btn，點擊第二個btn能夠appedn出第三個btn ...... 依序下去.

但實際運行時append出來的按鈕點擊時卻沒有反應，必須把上面標注的那段on click改為如下：

$(document).on('click', '.btn', function(e) {
    e.preventDefault();
    $('body').append("<a href='#' class='btn'>append出來的按鈕</a>");
})

因為append出來的btn按鈕不在一開始就load進來的dom上，所以點擊沒有作用。
把on click往上拉到在文件內點擊class為btn的所有按鈕，這樣就可行了

網站安裝免費ssl憑證後，仍然被瀏覽器判斷為連線不安全的原因

網站安裝免費ssl憑證後，仍然被瀏覽器判斷為連線不安全的原因可能有三點

一、憑證安裝有問題
二、SSL證書到期(免費的憑證有效期可能只有三個月，需再自己手動更新)
三、網站內有設定外連結的元素(如：css, js, img)，連結是設定http://

一般安裝了證書還顯示不安全的，大概都屬於第三點，狀況類似如下：

假設網站內有一張圖片是連結外部網站，圖片的src為
<img src="http://xxxx.com/images/pic.jpg">
如果自己網站這邊有安裝ssl憑證，上面紅字部分的外連結元素就可能被瀏覽器判斷為不安全連線，只要把http://改為https:// 或是把圖檔放在自己的空間然後以相對連結帶入即可。

以上的狀況也適用於css, js 等資源的引用

css的transition在android chrome瀏覽器上的問題css background image with transition problem on android chrome

使用css設定transition時
background image的屬性在android的chrome瀏覽器會遇到錯誤的狀況，記錄如下

遇到的錯誤狀況是在使用jquery針對被點擊的按鈕執行addClass跟removeClass的動作時
如果增加的class內有設定改變background image，在android的chrome上會顯示不出來

主要原因在於下面標示的部分：

transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;

只要把all屬性改為明確指定屬性，就不會出現錯誤狀況，如下：

transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;