Category: css

為了解決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優先...

專案有個需求,網頁中有些<INPUT>輸入欄位只接受英數字,並加掛了Javascript按鍵事件,依特定規則對輸入字元進行過濾。 接獲使用者回報,當使用新注音輸入法操作該輸入欄位時,會產生非預期的結果。猜想應是Javascript事件得配合輸入法的某些特殊行為進行調整,但轉念一想,由於...

在部落格上分享技術心得,常帶來意外收獲! 網友的迴響總讓我見識增長,額外學到的新東西超乎想像,每每發現過去忽略或未曾接觸的寶藏,總令我欣喜若狂。 說出來也不怕大家笑話,從事Web開發多年,卻未曾在Javascript下過苦工,對CSS也是開始把玩jQuery後才漸漸熟悉的。終日周旋於工作家...

測試了一下,ReportViewer 2008在跨瀏覽器方面問題挺多。 例如報表工具列,只有在IE下可以完整顯示,線上列印功能要動用ActiveX Control,所以IE以外的瀏覽器無法使用天經地義。但測試下來,在IE以外的瀏覽器上仍然有些其他問題要克服... 在非IE瀏覽器裡,即使Report...

慢慢開始發現IE8的Developer Tools有些過人之處,面對Firebug,不再只是被壓著打。 以下這個功能就深得我心!! 追出元素上套用的所有的CSS設定及其來源一點也不稀奇,是各大Browser輔助工具必備的本事,但IE8 Developer Tools的Style追蹤畫面上,每個...