網友小黑提問: 網頁配置分為上下兩欄，上欄高度固定，下欄佔滿剩餘空間。當上欄隱藏時下欄佔滿全部版面，上欄顯示時恢復原有版面配置，應如何實作? 一時技癢，順便也想測驗自己的CSS技巧，拿來當家庭作業暖暖手指。 在頁面放入兩個<div>當成上下欄容器，上欄<div c...

專案需求，需實現以下效果: 資訊列有三個元素，藍色部分為主要顯示內容，綠色區塊(Block 1)及紅色區塊(Block 2)靠緊右側為次要資訊。當視窗寬度不足，綠色及紅色區塊需自動隱藏，避免遮蔽藍色區塊的文字。 JavaScript熟手會優先想到攔截window.onresize事件，再依...

最近處理到網頁多語系動態切換，部分按鈕採圖檔形式(需為每個語系分別製作圖檔，愛美得多付出些代價)，因此切換語系時需變更按鈕圖檔來源，切換效果如下: 若是以前，遇到這類需求不多思索，抄起jQuery上就對了! 訂閱切換選項click事件，取得要切換語系，改變<img> src指向...

日前曾遇此蟲，爬文解決而未寫KB。今日同事再遇，腦中只餘殘存印象，戳力苦思蒐羅，方復拾回，嗔甚，為文誌之以杜後患。 網友Brian Richards對這個問題做了清楚的分析，也提交到MS Connect，其發生條件包含: DIV設為overflow: auto且指定寬度 DIV...

為了解決padding影響寬度造成破版的問題，新學會一個CSS屬性: Box-Sizing。 Box-Sizing只決定一事件: 矩型元素在計算寬度及高度時，border及padding為內含還是外加? (參考: Box Model) 而其設定值有三種: content-box、border-b...

寫了好幾年網頁，卻一直是CSS新手，最近一年才比較認真研究個中奧妙，也慢慢解開一些原本搞不定的小眉角，說穿了不複雜，但相信我肯定不是地球最後一個發現的網頁攻城獅，故筆記分享，如高手發現有誤或另有妙法，請不吝指正。 有個常遇到的需求，我卻從沒弄懂過: 分成多個直欄，左方直欄寬度固定，最右欄佔滿剩...

寫了好幾年網頁，卻一直是CSS新手，最近一年才比較認真研究個中奧妙，也慢慢解開一些原本搞不定的小眉角，說穿了不複雜，但相信我肯定不是地球最後一個發現的網頁攻城獅，故筆記分享，如高手發現有誤或另有妙法，請不吝指正。 我對於position: absolute的認識是很粗淺的，印象還停留在ASP....

接獲報案，又出現IFrame無法佔滿網頁的問題: 原本以為是小菜一碟，這是五年前就知道的超級老哏，只需加上html,body { height: 100% }立刻藥到病除，檢視原始碼後卻讓我大吃一驚跌坐在地，網頁早就加上height: 100%，莫非茶包又變種了? <...

對CSS幼幼班學生(敝人在下小弟我)而言，"為什麼這團CSS設定會產生這樣的效果"常常是個謎，尤其在處理大小、位置議題，面對層層相套的容器，外加不同margin與padding，混搭height、inline-hight跟font-size相輝映，最後還得考量CSS繼承闗係，...

為了方便觸控操作，IE10針對<input>及<input type="password">分別提供了快速清除鈕(X圖示)以及密碼文字顯示鈕(小眼睛圖示)的功能: 快速清除鈕可取代觸控進行全選並刪除的一連串複雜動作，而密碼顯示鈕可協助使用者確認輸...

相信身處"跨瀏覽器無間地獄"的網頁開發朋友們，在動用HTML5/CSS3新語法前，常需要確認該語法在目標瀏覽器版本上的支援狀況才會放心吧? 今天發現一個超方便的查詢工具: When can I use… (http://caniuse.com) 好工具不需多費唇舌推銷，...

[2012-04-12更新] 搜尋網頁排版置中的事上新聞囉!! 不過今天測試，問題看來已經排除了。這幾天發現Google的查詢結果排版怪怪的，也聽到大家在抱怨Google的查詢結果忽然變成置中顯示，Chrome、Firefox或IE都有傳出災情。原本推想是Google換版產生的瑕疵，但除了不美觀...

平時寫網頁處理Flash(.swf)的機會不多，今天才發現網頁上的<div> <img>等元素，就算將z-index提高到99，還是永遠被壓在Flash下方。(如下圖左所示，swf檔借自交通部觀光局網站) 從同事身上學到一招: Flash物件有個wmode屬性，設為...

發現很多搞網頁(或被網頁搞)的同學還不知道IE Dev Tools射CSS茶包的妙用，在此分享我的使用經驗，簡單列出一些排除CSS問題及測試CSS效果的常用技巧。(IE Dev Tools從IE8起就已內建，到IE9又有所增強，本文的操作以IE9為例) 使用IE8/IE9開啟網頁，再按下F12，...

世上最遙遠的距離不是生與死，而是網頁在不同瀏覽器差了1個pixel，怎麼調都搞不定! 不少網頁設計人員應該都有過經驗，設計得好好的網頁，換個瀏覽器檢視，排版就出現問題。例如: 用<div>圖檔與背景圖擋的位置精算位移接合圖檔，在Firefox下密合得天衣無綘，但換到IE、...

寫Web的人或多或少對CSS有一些了解，知道CSS Selector(如#id, .className, div.className)在套用上會採取愈具針對性愈優先的原則，所以當多組Style設定衝突時，指定#id比指定.className優先，指定.className的規則又比只指定div優先...