Browse by Tags

CODE-使用CSS實現按鈕圖檔切換
最近處理到網頁多語系動態切換,部分按 鈕採圖檔形式(需為每個語系分別製作圖檔,愛美得多付出些代價),因此切換語系時需變更按鈕圖檔來源,切換效果如下: 若是以前,遇到這類需求不多思索,抄起jQuery上就對了! 訂閱切換選項click事件,取得要切換語系,改變<img> src指向該語系對應的圖檔,再調整語系選項class,使已選取項目呈現不同顏色即大功告成,程式範例如下所示: 線上展示 <! DOCTYPE html > < html xmlns ="http...
Posted 30 January 2014 08:10 AMJeffrey | with no comments 17,724
Filed under:
IE9 Bug-滑鼠移過導致高度增加
日前曾遇此蟲,爬文解決而未寫KB。今日同事再遇,腦中只餘殘存印象,戳力苦思蒐羅,方復拾回,嗔甚,為文誌之以杜後患。 網友 Brian Richards 對這個問題做了清楚的分析,也提交到 MS Connect ,其發生條件包含: DIV設為overflow: auto且指定寬度 DIV內含TABLE,寬於DIV而產生水平捲軸 TD中元素使用CSS :hover進行樣式變化 以下範例可重現問題: <! DOCTYPE html > < html > < head >...
Posted 09 September 2013 10:19 PMJeffrey | with no comments 5,182
Filed under: ,
【CSS新手筆記】Box-Sizing
為了解決padding影響寬度造成破版的問題,新學會一個CSS屬性: Box-Sizing 。 Box-Sizing只決定一事件: 矩型元素在計算寬度及高度時,border及padding為內含還是外加? (參考: Box Model ) 而其設定值有三種: content-box、border-box及padding-box。預設值為content-box,意指元素實際寬高等於CSS指定寬高再加上border/padding(外加)、border-box時則border/padding為內含,元素的實際寬高即為CSS所指定寬高...
Posted 11 August 2013 11:40 AMJeffrey | with no comments 26,871
Filed under:
【CSS新手筆記】左欄固定,右欄佔滿剩餘空間
寫了好幾年網頁,卻一直是CSS新手,最近一年才比較認真研究個中奧妙,也慢慢解開一些原本搞不定的小眉角,說穿了不複雜,但相信我肯定不是地球最後一個發現的網頁攻城獅,故筆記分享,如高手發現有誤或另有妙法,請不吝指正。 有個常遇到的需求,我卻從沒弄懂過: 分成多個直欄,左方直欄寬度固定,最右欄佔滿剩餘寬度。直到後來學會了利用float排列,才慢慢找到解法: 以上解法是將左側的兩個<div>設成float: left,使其向左貼齊排列,而最後一個<div>要使用overflow:...
Posted 27 July 2013 08:11 AMJeffrey | 3 comment(s) 20,207
Filed under:
【CSS新手筆記】小探position: absolute應用
寫了好幾年網頁,卻一直是CSS新手,最近一年才比較認真研究個中奧妙,也慢慢解開一些原本搞不定的小眉角,說穿了不複雜,但相信我肯定不是地球最後一個發現的網頁攻城獅,故筆記分享,如高手發現有誤或另有妙法,請不吝指正。 我對於position: absolute的認識是很粗淺的,印象還停留在ASP.NET 1.1時代WebForm的 Grid Layout Mode ,啟用後網頁的控制項會變成像Window Form一樣採絕對座標,可拖拉擺放到任意位置。當時知道背後是透過position: absolute再加上top...
Posted 22 July 2013 10:32 PMJeffrey | 3 comment(s) 10,537
Filed under:
【茶包射手日記】長不高的IFrame
接獲報案,又出現IFrame無法佔滿網頁的問題: 原本以為是小菜一碟,這是五年前就知道的 超級老哏 ,只需加上html,body { height: 100% }立刻藥到病除,檢視原始碼後卻讓我大吃一驚跌坐在地,網頁早就加上height: 100%,莫非茶包又變種了? <! DOCTYPE html > < html > < head > < title > Frame Height Issue, AGAIN! </ title > <...
Posted 18 May 2013 01:50 PMJeffrey | 3 comment(s) 28,400
Filed under: , ,
CSS配置偵錯利器–Firefox Page Inspector 3D檢視
對CSS幼幼班學生(敝人在下小弟我)而言,"為什麼這團CSS設定會產生這樣的效果"常常是個謎,尤其在處理大小、位置議題,面對層層相套的容器,外加不同margin與padding,混搭height、inline-hight跟font-size相輝映,最後還得考量CSS繼承闗係,結果往往叫人目炫神迷不知所以。 基本上IE的Dev Tools及Chrome的開發者工具都能剖析各元素的CSS設定、繼承套用計算,但Firefox的 Page Inspector 有個神奇的3D檢視功能,解構容器階層關係時尤其火力強大...
Posted 05 May 2013 10:06 AMJeffrey | with no comments 10,905
Filed under: ,
停用IE10密碼欄位的小眼睛功能
為了方便觸控操作,IE10針對<input>及<input type="password">分別提供了快速清除鈕(X圖示)以及密碼文字顯示鈕(小眼睛圖示)的功能: 快速清除鈕可取代觸控進行全選並刪除的一連串複雜動作,而密碼顯示鈕可協助使用者確認輸入內容,彌補觸控打字慢、錯誤率高的困擾。但在某些情境下,可能需要停用這兩項輔助功能(例如: 安全理由、跨瀏覽器一致性...),有幾種做法: 修改群組原則(Group Policy) 停用密碼顯示 切換成IE相容模式...
Posted 22 April 2013 08:00 AMJeffrey | with no comments 9,312
Filed under: ,
瀏覽器HTML5/CSS3支援度速查工具
相信身處" 跨瀏覽器無間地獄 "的網頁開發朋友們,在動用HTML5/CSS3新語法前,常需要確認該語法在目標瀏覽器版本上的支援狀況才會放心吧? 今天發現一個超方便的查詢工具: When can I use… ( http://caniuse.com ) 好工具不需多費唇舌推銷,實際用一下,即使身處無間地獄也能馬上感受佛光萬丈所帶來的溫暖... 網站作者 累積的功德大概有扶老太太過街兩百次那麼多吧! 幾項不能錯過的特色: Index頁籤列舉了CSS、HTML5、JavaScrip...
Posted 12 July 2012 07:44 PMJeffrey | 1 comment(s) 11,340
Filed under: ,
IE Dev Tools練習題-檢測Google搜尋結果不當置中問題
[ 2012-04-12更新 ] 搜尋網頁排版置中的事上 新聞 囉!! 不過今天測試,問題看來已經排除了。 這幾天發現Google的查詢結果排版怪怪的,也聽到大家在抱怨Google的查詢結果忽然變成置中顯示,Chrome、Firefox或IE都有傳出災情。原本推想是Google換版產生的瑕疵,但除了不美觀外,並不影響使用,便不以為意。直到聽說同事找出密技--改連Google繁體版( www.google.com ),不連Google台灣( www.google.com.tw )即可避開問題,這才引起我的好奇心...
筆記-避免網頁元素被Flash"壓落底"
平時寫網頁處理Flash(.swf)的機會不多,今天才發現網頁上的<div> <img>等元素,就算將 z-index 提高到99,還是永遠被壓在Flash下方。(如下圖左所示,swf檔借自 交通部觀光局 網站) 從同事身上學到一招: Flash物件有個 wmode 屬性,設為transparent時,除了可讓Flash背景變透明外,還可以改變其一律浮在任何物件上方的預設行為( 參考來源 ,設為opaque亦可讓Flash參與HTML元素的層次排列),使其改由z-index決定層次...
Posted 23 August 2011 11:42 PMJeffrey | 1 comment(s) 7,957
Filed under: ,
射CSS茶包的好幫手-IE9 Dev Tools
發現很多搞網頁(或被網頁搞)的同學還不知道IE Dev Tools射CSS茶包的妙用,在此分享我的使用經驗,簡單列出一些排除CSS問題及測試CSS效果的常用技巧。(IE Dev Tools從IE8起就 已內建 ,到IE9又有所增強,本文的操作以IE9為例) 使用IE8/IE9開啟網頁,再按下F12,即可啟動IE Developer Tools(開發者工具),展開茶包獵殺行動。以下用幾個情境示範如何藉由IE Dev Tools追查及測試CSS規則套用情形: 【檢視特定網頁元素的CSS設定】 按下HTML頁籤的箭頭圖示...
Posted 04 August 2011 07:16 AMJeffrey | 2 comment(s) 12,313
Filed under: , ,
CSS Reset是什麼? 能吃嗎?
世上最遙遠的距離不是生與死,而是網頁在不同瀏覽器差了1個pixel,怎麼調都搞不定! 不少網頁設計人員應該都有過經驗,設計得好好的網頁,換個瀏覽器檢視,排版就出現問題。例如: 用<div>圖檔與背景圖擋的位置精算位移接合圖檔,在Firefox下密合得天衣無綘,但換到IE、Safari檢視,卻左右相差一個Pixel,甚至在IE的不同版本顯示結果也不盡相同,為了一個Pixel,調來調去調成仇,搞到設計人員想跳樓。 究其根源,在於各瀏覽器對元素預設位置設定有些微差異(但隨著大家對HTML/CSS統一標準愈來愈有共識...
Posted 22 July 2011 07:40 AMJeffrey | 6 comment(s) 39,060
Filed under:
筆記-CSS選擇器的套用優先順序
寫Web的人或多或少對CSS有一些了解,知道CSS Selector(如#id, .className, div.className)在套用上會採取 愈具針對性愈優先 的原則,所以當多組Style設定衝突時,指定#id比指定.className優先,指定.className的規則又比只指定div優先。用個具體例子來說明,以下<div>中的文字是什麼顏色? < html xmlns ="http://www.w3.org/1999/xhtml" > <...
Posted 08 June 2011 07:52 AMJeffrey | 3 comment(s) 26,445
Filed under:
如何在網頁輸入時停用中文輸入法? (限IE/FF)
專案有個需求,網頁中有些<INPUT>輸入欄位只接受英數字,並加掛了Javascript按鍵事件,依特定規則對輸入字元進行過濾。 接獲使用者回報,當使用新注音輸入法操作該輸入欄位時,會產生非預期的結果。猜想應是Javascript事件得配合輸入法的某些特殊行為進行調整,但轉念一想,由於專案規格已限定瀏覽器版本,何不試著找看看瀏覽器的特異功能來解問題? 在Web上實現WinForm常見的操作情境 -- 當輸入某個TextBox時暫時停用中文輸入法。 結果我找到了ime-mode,一個只有...
Posted 13 October 2010 02:54 PMJeffrey | 3 comment(s) 15,066
Filed under: , ,
更多文章 « 上一頁 - 下一頁 »

搜尋

Go

<June 2018>
SunMonTueWedThuFriSat
272829303112
3456789
10111213141516
17181920212223
24252627282930
1234567
 
RSS
創用 CC 授權條款
【廣告】
twMVC
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication