前端無遠弗屆

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

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

一開始以為是下方使用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;

    ........

}

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

整理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/

先備記一下!!

(一)常用的CSS命名規則

　　頭：header

　　內容：content/container

　　尾：footer

　　導航：nav

　　側欄：sidebar

　　欄目：column

　　頁面週邊控制整體佈局寬度：wrapper

　　左右中：left right center

　　登錄條：loginbar

　　標誌：logo

　　廣告：banner

　　頁面主體：main

　　熱點：hot

　　新聞：news

　　下載：download

　　子導航：subnav

　　菜單：menu

　　子功能表：submenu

　　搜索：search

　　友情連結：friendlink

　　頁腳：footer

　　版權：copyright

　　滾動：scroll

　　內容：content

　　標籤頁：tab

　　文章列表：list

　　提示資訊：msg

　　小技巧：tips

　　欄目標題：title

　　加入：joinus

　　指南：guild

　　服務：service

　　註冊：regsiter

　　狀態：status

　　投票：vote

　　合作夥伴：partner

在 css 裡面，如果子元素 div 設float:left

在Firfox底下父元素div 不會隨著自動更改高度

<div id="aa">
      <div id="bb">
      </div>
</div>

#aa{background:#ffffff;}
#bb{float:left;}

之前都是在最底下，塞一個空的<div style="clear:both"></div>

但今天發現更簡單的方法似乎可行

就是在父div css裡面加一個 overflow:hidden;

FF IE6 IE7 測試皆正常

#aa{background:#ffffff; overflow:hidden;}

資料來源：http://goo.gl/sjhWi

第一種 div 置中方法，適用於 FireFox、Chrome、Opera

margin: 0px auto;

第二種 div 置中方法，IE8 適用

要在 IE8 成功置中可以用兩個 div 相互合作
外面的 div 要設定 text-align:center
讓包在裡面的 div 可以順利置中

<div style="text-align:center;">

　<div style="margin:0 auto;border: 2px solid blue; width:150px;">這裡是文字</div>

</div>

第三種 div 置中方法，適用於 IE7

*margin: 0px auto;

第四種 div 置中方法，適用於 IE6

_margin: 0px auto;

補充：

body {

text-align: center; /*FOR IE5 專用才會置中*/

}

由於在body中有設定text-align: center;
這時文字會置中(被繼承)
所以在 container需在加入text-align: left;
才會使文字靠左編排

修改如下

#container
{

margin: 0 auto;
width: xxxpx;
text-align: left;

}

資料來源：網路轉載