前端無遠弗屆

今天在排版的時候發現一個問題，如下圖

圖片與下方區塊產生了空白的間距

一開始以為是下方使用Flexbox造成的間距bug

後來尋遍google都找不到解決方法

突然想到或許是image造成的問題

果然…

只要將圖片設為

display: block;

問題就解決了

        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
            .box_a{
                background-color:#eee;
            }
        }    

        另一種寫法

        @media all and (-ms-high-contrast:none) {
             .box_a{
                background-color:#eee;
            }
        }

二者方法測試均有效

開發網站時，在IOS上的瀏覽器若是以電腦版模式預覽時

會發現滾動到底部的時候會整個頁面都會跟著滾動

這種情況常發生在於使用iframe或是高度固定時

解決方式是透過 -webkit-overflow-scrolling 屬性控制元素在移動設備上是否使用滾動回彈效果.

-webkit-overflow-scrolling:touch;

overflow-y:scorll;

在找尋解決方式過程中發現StackoverFlow上有人提到上述方法有可能一樣not working，這時候只要在後面加上 !important 即可

MDN上的定義

-webkit-overflow-scrolling 二個屬素值：

auto: 使用普通滾動, 當手指從觸摸屏上移開，滾動會立即停止。

touch: 使用具有回彈效果的滾動, 當手指從觸摸屏上移開，內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。

關於可能產生的Bug部分，可參閱對岸相關討論文章

其它參考資料：深入研究-webkit-overflow-scrolling:touch

過長的文章，想要侷限顯示的字數

可以透過css的 text-overflow: ellipsis

p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:nowrap;

}

使用<span>標籤時，要將display設為inline-block (行內區塊)

span {

    display: inline-block;

    text-overflow: ellipsis;

    ........

}

注意：此作法只能針對單行文字，若要做多行的隱藏溢出文字，則要用其它方式

因為電子報是透過email閱讀器閱讀，而非瀏覽器

會有語法是否支援的問題，因此製作電子報時要注意以下幾點：

• 不使用div排版，請使用table來編排
• 圖片使用絕對路徑
• <img>要設定正確的width和height

整理nth-child的幾種應用方式

假設有數字1~10

1、除了第n個之外的全部

     :nth-child(n+6)  ---------- 從第六個開始(選擇除了前面5個外的全部元素，即6、7、8、9、10)

2、只選擇前面的幾個

     :nth-child(-n+5)  ---------- 只選擇前面的5個元素 (即1、2 、3、4、5)

3、從開始的那個，間隔x個選擇

     :nth-child(4n-7)  ---------- 從第1個開始，每隔4個就選擇 (即1、5、9)

     :nth-child(4n+1)  ---------- 從第1個開始，每隔4個就選擇 (即1、5、9)

4、奇、偶數

     :nth-child(odd)  ------- 奇數 (即1、3、5、7、9)

     :nth-child(even)  ------ 偶數 (即2、4、6、8、10)

5、只選擇第n個

     :nth-child(n)

     :nth-child(5) ---------- 只選擇第5個元素 (即5)

6、選擇第一個

     :first-child

7、選擇最後一個
     :last-child

8、選擇倒數第n個

     :last-child(n)

     :last-child(3) ---------- 選擇倒數第3個元素 (即8)

使用前，先確認各家瀏覽器的支持度 Can I use

更進階的nth-child 選擇器計算方式 使用CSS3 :nth-child(n) 選取器教學

去除連結產生的虛線外框

可以在focus底下加入

outline: none;    /* for Firefox Google Chrome  */
behavior:expression(this.onFocus=this.blur());  /* for IE */

新專案WEB版聊天視窗是基於chrome開發

因此CSS不需考量到其它瀏覽器

拖曳視窗使用 -webkit-app-region: drag;  

遇到無邊框視窗時，會造成連結、按鈕無法點

使用了z-indx 將設定推曳的DIV置於最底層，一樣會被遮蓋住

找了許多國內外文章都找不到解決方式

最後終於找到方法

原來只需要在不需使用drag的地方加上 -webkit-app-region: no-drag; 

就可以解決，但卻又遇到另一個問題~cursor: move; 的圖形不會出現

追蹤中...

今天在進行排版時發現的問題：

為了讓CSS能在各瀏覽器表現一致，取消各瀏覽器的預設行為，通常我們會定義一個 reset.css 。

當網頁重新指定list-style-type 給ul

希望列表時能再秀出清單符號(如小圈點或小方塊) 卻沒有作用

歷經了2小時後，終於找到正解....

這個問題會發生，是因為小圓點是放在content的外面，因此要補padding給ul，將content擠出一些空間來放小圓點。

因此通常給ul一個padding-left:15px或20px，小圓點就會現身了

不再侷限的網頁排版

網路上不少相關資訊

大師級的教學：

http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html

http://www.mrmu.com.tw/2011/04/06/css3-media-queries-liquid-layout/

先備記一下!!