Browse by Tags

CSS 左右貼齊樣式在 IE 產生大段空白

講到 CSS 我充其量只算是票友，但專案遇到問題還是得面對... Orz 本次的案例如下： 使用者回報某網頁用 Chrome 看正常，改在 IE 卻有部分段落的句子前方出現一大段空白，檢視 HTML 原始碼，發現編寫者輸入文字內容時，將段落裡的不同句子拆成多行，前方還加上 Tab 與上方對齊以求美觀。一般來說，HTML 文字出現的空白會被壓縮，接連的換行與空白符號只會被當成一個空白處理(要留白需改用      )，但由於套用 text-align...

Posted 03 May 2018 09:34 PM 由 Jeffrey | with no comments 4,237

Filed under: CSS, IE

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 PM 由 Jeffrey | with no comments 5,975

Filed under: CSS, IE

【茶包射手日記】長不高的IFrame

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

Posted 18 May 2013 01:50 PM 由 Jeffrey | 3 comment(s) 30,417

Filed under: CSS, Trouble-Shooting, IE

停用IE10密碼欄位的小眼睛功能

為了方便觸控操作，IE10針對<input>及<input type="password">分別提供了快速清除鈕(X圖示)以及密碼文字顯示鈕(小眼睛圖示)的功能: 快速清除鈕可取代觸控進行全選並刪除的一連串複雜動作，而密碼顯示鈕可協助使用者確認輸入內容，彌補觸控打字慢、錯誤率高的困擾。但在某些情境下，可能需要停用這兩項輔助功能(例如: 安全理由、跨瀏覽器一致性...)，有幾種做法: 修改群組原則(Group Policy) 停用密碼顯示 切換成IE相容模式...

Posted 22 April 2013 08:00 AM 由 Jeffrey | with no comments 10,498

Filed under: CSS, IE

IE Dev Tools練習題-檢測Google搜尋結果不當置中問題

[ 2012-04-12更新 ] 搜尋網頁排版置中的事上 新聞 囉!! 不過今天測試，問題看來已經排除了。 這幾天發現Google的查詢結果排版怪怪的，也聽到大家在抱怨Google的查詢結果忽然變成置中顯示，Chrome、Firefox或IE都有傳出災情。原本推想是Google換版產生的瑕疵，但除了不美觀外，並不影響使用，便不以為意。直到聽說同事找出密技--改連Google繁體版( www.google.com )，不連Google台灣( www.google.com.tw )即可避開問題，這才引起我的好奇心...

Posted 11 April 2012 04:22 PM 由 Jeffrey | 5 comment(s) 8,956

Filed under: CSS, Trouble-Shooting, IE

射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 AM 由 Jeffrey | 2 comment(s) 14,084

Filed under: CSS, Trouble-Shooting, IE

如何在網頁輸入時停用中文輸入法? (限IE/FF)

專案有個需求，網頁中有些<INPUT>輸入欄位只接受英數字，並加掛了Javascript按鍵事件，依特定規則對輸入字元進行過濾。 接獲使用者回報，當使用新注音輸入法操作該輸入欄位時，會產生非預期的結果。猜想應是Javascript事件得配合輸入法的某些特殊行為進行調整，但轉念一想，由於專案規格已限定瀏覽器版本，何不試著找看看瀏覽器的特異功能來解問題? 在Web上實現WinForm常見的操作情境 -- 當輸入某個TextBox時暫時停用中文輸入法。 結果我找到了ime-mode，一個只有...

Posted 13 October 2010 02:54 PM 由 Jeffrey | 3 comment(s) 17,042

Filed under: CSS, ASP.NET, IE

IE8-好用的CSS"試算"功能

慢慢開始發現IE8的Developer Tools有些過人之處，面對Firebug，不再只是被壓著打。 以下這個功能就深得我心!! 追出元素上套用的所有的CSS設定及其來源一點也不稀奇，是各大Browser輔助工具必備的本事，但IE8 Developer Tools的Style追蹤畫面上，每個設定前方都附了一個Checkbox，勾一下就可以立刻看出有設與沒設的差別，這個貼心設計用來找版面配置問題上犀利無比，讓我不禁想起立鼓掌。 另外，小磁片按鈕也很好用，看到喜歡的css, js, html，按一下就可以馬上存檔...

Posted 29 March 2009 04:28 AM 由 Jeffrey | 3 comment(s) 13,114

Filed under: CSS, IE

【茶包射手專欄】IE Developer Toolbar破案奇錄

接獲通報，Sharepoint Portal的首頁，原本在IE6上看是藍底白字的MenuBar，在IE7上看到的是白底白字。 這回破案的主角不是茶包一哥Process Monitor了，而是 IE Developer Toolbar !! 利用Find/Find By Click的功能找到MenuBar的DOM處，再用下圖的好功能一舉追出它的CSS套用狀況。 在IE7中看到以下的異象: -: #75A3DF... 這是啥? (咳! 不准想歪) 跟IE6比對的結果，應該是BACKGROUD-COLOR...

Posted 17 August 2007 10:17 AM 由 Jeffrey | with no comments 9,173

Filed under: CSS, Tools, Trouble-Shooting, IE

搜尋