因為目前雜七雜八的工作中也包含要看客服回覆,
導致我變得很愛寫信去客服信箱跟打客服電話..
當然是我真的有問題想問啦,但會這麼勤勞大部分是好奇的成份....
以目前的經驗來說不得不推的就是hypo了!
他們的blog副標題也寫著「常常知錯能改的 hypo 團隊」真不是蓋的!
我只寫過兩次信,
第一次反應說扣環的黏膠會留殘膠希望能改善,
第二次是提出我對新產品的期望,
感覺都是很容易被敷衍過去的問題...
沒想到他們不但很認真的回答,信中還預告會推出新商品的時間,
短短沒幾個月竟然都實現了!驚!!
光因為這樣就讓貧乏的我願意再繼續花錢在他們不便宜的產品上,畢竟他們是真的注重品質又認真解決問題的。
不過最近在博客來廣告信上看到新書的介紹,
是微空間大設計:全球39間超小型風格商店之創意現場直擊
光看介紹還蠻吸引人的,就點進去看了一下試閱的內頁,
沒想到錯字之多讓人傻眼到不行!!試閱也才4頁啊!!
這種試閱看完還會有人肯買嗎.......=.=
於是我決定把這個艱難的問題丟給博客來客服,就寫了以下這樣的信:
--
http://www.books.com.tw/exep/prod/booksfile.php?item=0010497400&
請問這個商品頁的內文試閱真的是書中的文字嗎?
對於這本書雖然有興趣,但是看過試閱後對於多到嚇人的錯字量感到不敢置信!
煩請告知試閱文字真的是和書中文字一模一樣,還是負責打字的人太混造成的?
謝謝。
--
等了9天終於有回覆了,意料外的非常短:
--
親愛的會員您好:
感謝您的來函,經查詢您詢問的商品《微空間大設計:全球39間超小型風格商店之創意現場直擊》,商品內容為圖片與文字組成,建議您可點閱商品圖片試閱看看。以上說明,提供您參考,謝謝您。
http://www.books.com.tw/exep/qa/webmail.php?TRACKID=5FC16231500E49F86654D88ECA2DB315
有任何問題請您再來信(點選以上連結),當竭誠為您服務。
因為用心,所以我們有自信可以給您最好的!
博客來 敬上
--
.........什麼鬼!??難道他以為我沒有看過試閱的圖嗎?
那個字小得跟鬼一樣,我連是不是跟它的文字試閱一樣都很難看出來了,還要我自己挑錯字!???最好是啦!!
告訴我實際上到底是什麼狀況有這麼難嗎!!!!
瞬間十分火大,不過仔細想想...要是這問題丟給我我也不知道該怎麼回...
Ans: 您好,我們的試閱頁面文字與實際書籍中的文字完全相同,並沒有輸入錯誤的問題...
=> 太好了書賣不出去了 =.=
Ans: 您好,非常抱歉經查證確實是我們的工作人員輸入有誤,未來我們會更謹慎....
=> 太好了這根本就砸自己的腳 =.=
也許身為客服他真的也只能這樣回了..
可是這跟詢問者的期待答案真是差了十萬八千里遠啊!!
想了很久...覺得還是應該好好針對使用者的問題回答,這才是最誠懇的解決方式~"~
如果真的是書錯字百出,那就承認後告知出版社,再把書下架之類(我實在覺得賣都是錯字的書不太道德..)。
如果真的是自己的人輸入錯誤,那就承認之後把字改正。
只是要做到這種程度,還得要看上層的器量了。
真是客服難為啊。
2011/01/18
Firefox Kit 入手炫耀文
耶~~~~~~~~~~~~~~~~~~~~(先歡呼一下)
先前看到為了Firefox手機版的推出,Mozilla辦了一個寄明信片到他們辦公室就可以得到Firefox Kit組的活動,
身為一個愛寄明信片的人,當然是二話不說的馬上參加!
寄去之後等了好一陣子,才收到一封Mozilla寄來的email,附上一個用來填地址的表單連結,
填完之後又等了很久很久...(真的很久,我都以為寄丟了)
今天終於收到一個謎樣的國外來的包裹,
裡面是這樣:

比想像中大包XD
不過有感覺出在推這波主打mobile版本的好像只有這個貼紙,
(不太明顯的)寫了"Firefox goes mobile"在左邊

然後有這個firefox的吊帶:

還有貼紙:

以及橡膠手環,可惜我已經不年輕了,不好意思戴...
一邊印著I support the Open Web
另一邊則是Mozilla。
因為是凹凸的字所以拍不清楚Orz

最喜歡的就是徽章啦!馬上拿來別在我的破包包上,馬上整個都感覺潮了起來~

目前(2011/01/18)這個活動還在辦喔!
請至這個連結
看第2項"Get a Firefox Mobile Kit",寄明信片並附上自己的email到其中一個地址就可以了!
當然更要請大家多投入Firefox的懷抱,離開萬惡的IE吧!
有智慧型手機的人也可以去下載Firefox Beta for mobile來試試看囉 : D
先前看到為了Firefox手機版的推出,Mozilla辦了一個寄明信片到他們辦公室就可以得到Firefox Kit組的活動,
身為一個愛寄明信片的人,當然是二話不說的馬上參加!
寄去之後等了好一陣子,才收到一封Mozilla寄來的email,附上一個用來填地址的表單連結,
填完之後又等了很久很久...(真的很久,我都以為寄丟了)
今天終於收到一個謎樣的國外來的包裹,
裡面是這樣:
比想像中大包XD
不過有感覺出在推這波主打mobile版本的好像只有這個貼紙,
(不太明顯的)寫了"Firefox goes mobile"在左邊
然後有這個firefox的吊帶:
還有貼紙:
以及橡膠手環,可惜我已經不年輕了,不好意思戴...
一邊印著I support the Open Web
另一邊則是Mozilla。
因為是凹凸的字所以拍不清楚Orz
最喜歡的就是徽章啦!馬上拿來別在我的破包包上,馬上整個都感覺潮了起來~
目前(2011/01/18)這個活動還在辦喔!
請至這個連結
看第2項"Get a Firefox Mobile Kit",寄明信片並附上自己的email到其中一個地址就可以了!
當然更要請大家多投入Firefox的懷抱,離開萬惡的IE吧!
有智慧型手機的人也可以去下載Firefox Beta for mobile來試試看囉 : D
2010/12/28
用PC瀏覽器開啟手機版網頁
最近愈來愈多大網站開始推出手機版本的網頁了,
但是有很多想讓人一窺原始碼的手機版網頁偏偏會判讀使用的瀏覽器,
即使點選「手機版」的連結,還是會被識破而跳轉回一般網站或直接顯示「您的瀏覽器不支援此頁面」,
看了真是讓人心癢難耐...
不過我沒有這麼容易投降的!
先去下載宣稱可以
"Test and debug on Opera Mobile using a Mac or PC"的Opera Mobile emulator來踹踹看!
結果看起來這個東西雖然可以模擬很多種手機的呈現,甚至觸碰、滑動的效果,
但卻沒有檢視原始碼的功能...orz
只好繼續拜咕狗大神,
好不容易找到了這篇教學文章,
原來Firefox的使用者只要安裝一個外掛就可以開啟手機版網頁了。
因為外掛已經改版的關係,目前使用的方式和教學文章中有些不同。
以下列出我測試過的步驟:
接下來測試一下,在切換成Disable的狀態下讀取Google Mobile的話,會被判讀出使用的是一般瀏覽器而自動跳轉到http://www.google.com/mobile/

切換成Enable的狀態後重新進入Google Mobile,就能正常瀏覽手機版頁面,按下Ctrl+U馬上就可以把原始碼看光光囉!
但是有很多想讓人一窺原始碼的手機版網頁偏偏會判讀使用的瀏覽器,
即使點選「手機版」的連結,還是會被識破而跳轉回一般網站或直接顯示「您的瀏覽器不支援此頁面」,
看了真是讓人心癢難耐...
不過我沒有這麼容易投降的!
先去下載宣稱可以
"Test and debug on Opera Mobile using a Mac or PC"的Opera Mobile emulator來踹踹看!
結果看起來這個東西雖然可以模擬很多種手機的呈現,甚至觸碰、滑動的效果,
但卻沒有檢視原始碼的功能...orz
只好繼續拜咕狗大神,
好不容易找到了這篇教學文章,
原來Firefox的使用者只要安裝一個外掛就可以開啟手機版網頁了。
因為外掛已經改版的關係,目前使用的方式和教學文章中有些不同。
以下列出我測試過的步驟:
- 還沒有使用Firefox的人,請先去下載。
- 安裝外掛Modify Headers。
- 在Firefox上面的工具列找到「工具」,選單的最下方應該可以找到「Modify Headers」的項目並點開。

- 上面有一條可以輸入的欄位,在最左欄(Action)點選「add」。

- 第二個欄位(Name)中必須輸入「user-agent」
- 第三個欄位(Value)需輸入的是「Mozilla/5.0 (SymbianOS/9.2; U; Series60/3.1 NokiaE51-1/100.34.20; Profile/MIDP-2.0 Configuration/CLDC-1.1 ) AppleWebKit/413 (KHTML, like Gecko) Safari/413」
- 第四個欄位(Comment)可以自己寫點註解,再點擊「Save」的按鈕就可以了!

- Save之後整個項目會被移到下面的列表,右側有一個綠色/紅色的圓點表示該項目的啟用/停用,點兩下可以切換。要使用時必須切換至「啟用」的狀態。

接下來測試一下,在切換成Disable的狀態下讀取Google Mobile的話,會被判讀出使用的是一般瀏覽器而自動跳轉到http://www.google.com/mobile/

切換成Enable的狀態後重新進入Google Mobile,就能正常瀏覽手機版頁面,按下Ctrl+U馬上就可以把原始碼看光光囉!
2010/09/28
寶藏巖.五年

上上個週末因為誤信了寶藏巖已經開村的消息,
在凡那比颱風登台的前夕騎著腳踏車再次探訪多年不見的寶藏巖。
以前因寶藏巖離學校非常近,大學時又住在學校(而且還天天蹺課),
自從發現寶藏巖的小村落便愛上了那帶著廢墟氣息的氛圍,三不五時往那裡跑。
最喜歡的不是晴天而是雨天,
循著蜿蜒的小路一直走到最頂端的木平台,坐在那裡吹風淋雨,可以坐一整個下午發呆都不會有人跟我搶。
回宿舍再洗個熱水澡,非常享受。
畢業後搬離學校,距離遠了,上班也無法像上課一樣自由的想蹺就蹺..
一陣子沒有去看寶藏巖,再去看的時候竟然圍起了工地圍牆,說是要做什麼整建的我也搞不清楚,
安心的想著應該沒多久就可以再開放了吧?
沒想到就這樣過了好幾年。
重新踏上寶藏巖的瞬間是興奮的,畢竟真的好久好久沒看見了,
雖然還有一些人在施工,但總之拿起相機先走走晃晃的拍些照...
沿著寶藏巖外圍往腳踏車道的方向走,
果然變了很多。
沿著牆的一片,以前是老阿嬤的小菜園

現在被全部剷平了,鋪上一片草皮。

可能因為匆匆趕工鋪上吧,看起來有點焦黃,
還安置上了幾隻石刻鳥,感覺更是淒涼。
以前有些看起來很克難的木頭階梯

現在也都不見了。
我沿著新蓋好的高級階梯往上爬,
邊爬邊想著這裡真的變了好多..一邊搜尋能拍照的點。
沒想到從階梯上突然衝出一個穿著保全服裝的大叔對著我吼:
「這裡還沒開放!!你在這裡做什麼!!!」
背著三台相機的我整個很傻眼的看著他說...
「拍照啊 O____O;
不是已經開放了嗎...聽說開放了我才來的......」
保全大叔繼續大吼:
「還沒!!還沒開放!!10月2號才開!!到時候再來!
不准再往裡面走了!這裡有九十幾台攝影機,你在哪裡我們都很清楚!!」
我只好往回走...
一邊想著..以前這裡除了小土地公,哪有什麼保全、攝影機..
現在除了滿山的攝影機,還裝了夜間照明用的大燈,
入村的地方也正在施工,想來是為了開村活動要搭建表演用的平台,
村口還有另一個保全大叔在值班,於是去問問他為什麼要如此嚴密監視,
大叔說是因為之前封村時有個後台很硬的人擅自闖進施工中的地方,結果發生意外死了,
於是這個很硬的後台就去跟市政府吵鬧,索賠一千萬。
市政府當然不願意賠,於是把皮球踢給施工單位,叫施工單位賠一千萬。
施工單位當然更不願意賠,說整個工程賺也沒賺到一千萬就要我賠一千萬!?
總之現在還在吵鬧中,要等10月移交給文化局才能讓一般人進去。
我:「...Orz...我可以簽一個死了也不會告你們的切結書然後進去拍照嗎....」
大叔:「...Orz...沒辦法啦...」
雨愈下愈大,我也只好離開了。
離開之前保全大叔跟我說10月2日再來吧,有很盛大的開村活動喔!有節目表演喔!
我只能苦笑..
並不是所有東西都是有人去管理、改建就會變得更美好,
我喜歡的是那安靜古樸的寶藏巖,
不是有表演、很熱鬧、人山人海的寶藏巖啊。
可惜時間再也回不去了。
但美好的寶藏巖永遠在我心裡。
2010/09/18
解決Win7環境IETester無法模擬本機檔案之IE7狀態問題
前陣子電腦重灌,
因為畢生難得終於有好人可以使用(無誤),於是我很懶惰的把事情都丟給阿饅。
阿饅也很理所當然的幫我灌了Win7,
之後我自己灌了新下載的IETester v0.4.4
沒想到要測網站的時候竟然很震驚的發現...IE7的頁籤測本機端檔案完全不能作用了!!
囧...大驚之下趕快開始拜google大神,
結果看到google大神說,只要取消相容性執行的勾勾就可以了!
可是我找到相容性卻發現...根本就沒有勾啊@@
也試了選XP SP2、XP SP3的相容性執行來試試看...結果更慘,連網址列要輸入都沒辦法了..
無奈之下只好繼續google,
於是有人提供了一個有點麻煩但是真的有用的方法!
解法如下:
舉例來說,我想要開啟的頁面是「E:\web\index.html」
就是這樣~分享給也遇到這個問題的人。
不過還是希望IETester趕快改版來解決這個問題吧!
因為畢生難得終於有好人可以使用(無誤),於是我很懶惰的把事情都丟給阿饅。
阿饅也很理所當然的幫我灌了Win7,
之後我自己灌了新下載的IETester v0.4.4
沒想到要測網站的時候竟然很震驚的發現...IE7的頁籤測本機端檔案完全不能作用了!!
囧...大驚之下趕快開始拜google大神,
結果看到google大神說,只要取消相容性執行的勾勾就可以了!
可是我找到相容性卻發現...根本就沒有勾啊@@
也試了選XP SP2、XP SP3的相容性執行來試試看...結果更慘,連網址列要輸入都沒辦法了..
無奈之下只好繼續google,
於是有人提供了一個有點麻煩但是真的有用的方法!
解法如下:
舉例來說,我想要開啟的頁面是「E:\web\index.html」
- 點選IETester上面的「所有IE版本」
- 勾選IE7,並在「輸入要在所有IE版本開啟的網頁網址」欄位內輸入「該網頁的資料夾位置」
在本例中就是輸入「E:\web\」。 - 輸入完按下Enter後,網頁顯示的部份會以一個很像windows資料夾的方式開啟該資料夾路徑,
此時再繼續在網址列中接著輸入剩下的檔名「index.html」,按下Enter。 - 上面的網址列就是我要的「E:\web\index.html」,而且網頁也就這樣很神奇的顯示了!
就是這樣~分享給也遇到這個問題的人。
不過還是希望IETester趕快改版來解決這個問題吧!
2010/08/26
台新銀行最懂女人心...個屁!!
今天下午突然手機響了,來電顯示是個不認識的電話0981361591,
接起來是位...應該是阿姨級的人物,劈頭就說:
「這裡是台新銀行XXX(沒聽清楚),小姐你有使用信用卡或現金卡嗎?」
雖然覺得丈二金剛摸不著頭腦,我還是回答她「有...啊」
於是她馬上連珠砲似的繼續說:
「那你付款的時候都是使用一次付清還是分期?」
身為一個小時候跟陌生人講話就被老爸毒打的好孩子(無誤),
雖然她講話沒有大陸腔,我還是很警覺的發問了:
「呃...我為什麼要告訴你?我沒有使用你們的任何服務耶。」
沒想到這位阿姨很快速的爆氣了:
「這是因為我們最近有個整合的服務...整合只有一家那就不叫整合了啊!!
要不要回答隨便你!!!=皿=!!!」
然後迅雷不及掩耳的掛了我的電話 =_____=
拎阿嬤咧!莫名其妙打電話來,講沒幾句就兇我還掛電話是怎樣!?
我有求你打電話給我嗎!!?
無言的發了一陣悶氣,還是決定向台新銀行反應,
這種垃圾電話實在應該禁止!特別是垃圾人打的!=皿=
再說如果台新銀行可以有個合理的回應,對他們的觀感應該可以恢復一點。
沒想到找到台新銀行的客服專區之後竟然發現「抱怨」類要在「上班時間」撥打「市話」才行,
想到可能得到的罐頭回應......實在不願意花電話錢來買!
又找了一下終於發現線上留言的表單,
洋洋灑灑的寫完來龍去脈,按下送出......
「網頁無法顯示」
.........靠腰!!!你耍我啊!!!!!!!!
總之我真的怒了!!一輩子都不想跟台新銀行有任何關係!!
最好不要再打這種機掰電話給我!!
台新銀行最懂女人心?屁!!!
難道不知道惹熊惹虎不能惹到恰查某嗎!!
真是夠了。=皿=
接起來是位...應該是阿姨級的人物,劈頭就說:
「這裡是台新銀行XXX(沒聽清楚),小姐你有使用信用卡或現金卡嗎?」
雖然覺得丈二金剛摸不著頭腦,我還是回答她「有...啊」
於是她馬上連珠砲似的繼續說:
「那你付款的時候都是使用一次付清還是分期?」
身為一個小時候跟陌生人講話就被老爸毒打的好孩子(無誤),
雖然她講話沒有大陸腔,我還是很警覺的發問了:
「呃...我為什麼要告訴你?我沒有使用你們的任何服務耶。」
沒想到這位阿姨很快速的爆氣了:
「這是因為我們最近有個整合的服務...整合只有一家那就不叫整合了啊!!
要不要回答隨便你!!!=皿=!!!」
然後迅雷不及掩耳的掛了我的電話 =_____=
拎阿嬤咧!莫名其妙打電話來,講沒幾句就兇我還掛電話是怎樣!?
我有求你打電話給我嗎!!?
無言的發了一陣悶氣,還是決定向台新銀行反應,
這種垃圾電話實在應該禁止!特別是垃圾人打的!=皿=
再說如果台新銀行可以有個合理的回應,對他們的觀感應該可以恢復一點。
沒想到找到台新銀行的客服專區之後竟然發現「抱怨」類要在「上班時間」撥打「市話」才行,
想到可能得到的罐頭回應......實在不願意花電話錢來買!
又找了一下終於發現線上留言的表單,
洋洋灑灑的寫完來龍去脈,按下送出......
「網頁無法顯示」
.........靠腰!!!你耍我啊!!!!!!!!
總之我真的怒了!!一輩子都不想跟台新銀行有任何關係!!
最好不要再打這種機掰電話給我!!
台新銀行最懂女人心?屁!!!
難道不知道惹熊惹虎不能惹到恰查某嗎!!
真是夠了。=皿=
2010/08/15
能通過W3C驗證的IE6、IE7 css hack要點
就在IE9 preview已經掀起討論風潮的現在,IE6、IE7仍然陰魂不散。
基於IE9不支援windows XP的原因,看來這個陰魂不散的情形還會持續很久很久..
本來很期望世人能夠看見IE6、IE7實在是已經該被淘汰的事實,進而升級或者使用其他瀏覽器,
但是昨天上班時處理了一則必須教會老伯如何使用某網站的客服......
講完將近一小時的電話後深深的感受到什麼叫做「數位落差」啊!!!orz
馬上讓我理解到要讓許多不熟悉電腦的使用者自己下載瀏覽器來用、甚至更新IE都是不可能的任務..
對於這個悲慘的現實也只能摸摸鼻子接受了。
然而要做IE6、IE7的css hack對於許多網頁設計師來說仍然是會造成粗口連連的工作,
剛好對這部份有些小心得,剛才查詢了一下也沒有什麼相關資訊,
索性就厚臉皮的分享一篇。
css reset
要寫出跨瀏覽器都能顯示一致結果的css,第一件事應該就是css reset了,
這部份很多人寫我就不多說,
最熱門的兩種就是YUI css reset和Eric Meyer的版本了,
我自己習慣使用的是使用Eric Meyer的版本再稍加修改,
畢竟別人做的東西雖然方便但未必完全符合自己需求,修改之後可以用得更順手。
能通過W3C驗證的IE6、IE7 css hack寫法
大部分的教學中都是使用*和_來達成css hack,
在css的屬性前面加上*可以達到IE7的hack,而加上_則可以擺平IE6,
用起來非常方便,
不過在IE8終於追隨W3C的規範之後會在意網頁究竟能不能通過驗證的人也愈來愈多,
偏偏*和_的寫法不能過驗證,
搜尋很多資料後才找到了可以通過的寫法:
在選擇器前面加上*:first-child+html可以針對IE7 hack,
而加上* html則可以針對IE6 hack,
如此便能通過W3C驗證。
ex:
*:first-child+html #side {
margin-right: 5px;
}/*--for ie7--*/
* html #side {
margin-right: 2px;
}/*--for ie6--*/
注意針對IE6使用的* html在*號後面有一個空白字元,若是忘記加上的話也沒有辦法過驗證喔!
float的使用
一開始要做需要IE6、IE7 hack的網頁時最頭大的就是使用float的部份常常會大爆炸!
經歷過那些一測試就發現整個網頁大爆炸的日子...真是可怕。
後來發現了幾個關鍵點,修正之後世界就突然變得美好許多XD
對我來說最容易爆炸的就是使用了float的列表,
html的部份是這樣:
<ul id="top_menu">
<li><a href="#">選項一</a></li>
<li><a href="#">選項二</a></li>
<li><a href="#">選項三</a></li>
<li><a href="#">選項四</a></li>
</ul>
以前我會傻傻的寫這樣的css:
#top_menu li a {
float: left;
display: block;
background: #cccccc;
width: 100px;
height: 30px;
line-height: 30px;
margin: 10px;
border: #333333 1px solid;
color: #666666;
text-align: center;
}
很開心的在fx看見它們長得就像我心裡想的樣子:

可是等我打開IE tester之後,卻崩潰的發現...

一開始想了很多方法都解決不了,腦袋很蠢的卡在點選範圍一定要寫在a上才能感應這件事情,
於是有一陣子都只好改用絕對定位來寫,
但是這樣必須把每個項目都加上id或class,真的好煩!
後來有一天才赫然發現可以這樣寫:
#top_menu li {
float: left;
}
#top_menu li a {
display: block;
background: #cccccc;
width: 100px;
height: 30px;
line-height: 30px;
margin: 10px;
border: #333333 1px solid;
color: #666666;
text-align: center;
}
僅僅是把float搬進li層,馬上就省下好多麻煩事!
不知道還有沒有跟我一樣傻傻的把float寫進a裡面結果為了大爆炸苦惱的人...可以參考參考。
另外就是IE6對於margin範圍的判斷異於常..瀏覽器,
大多在解決float問題後還會發生爆炸都是margin問題,
試著調整一下,若還不行的話就把寬高指定固定值,再搭配overflow: hidden;通常都能夠獲得解決。
然後就可以大罵一聲IE sucks!之後收工啦XD!
寫這篇文章看看能不能幫助一些跟我一樣只知道蠻幹亂寫又沒人可以救的人~
如果只有我這麼呆...那就當作我在自嗨好啦 : ~
還是希望IE6、7早日安息,阿們。
基於IE9不支援windows XP的原因,看來這個陰魂不散的情形還會持續很久很久..
本來很期望世人能夠看見IE6、IE7實在是已經該被淘汰的事實,進而升級或者使用其他瀏覽器,
但是昨天上班時處理了一則必須教會老伯如何使用某網站的客服......
講完將近一小時的電話後深深的感受到什麼叫做「數位落差」啊!!!orz
馬上讓我理解到要讓許多不熟悉電腦的使用者自己下載瀏覽器來用、甚至更新IE都是不可能的任務..
對於這個悲慘的現實也只能摸摸鼻子接受了。
然而要做IE6、IE7的css hack對於許多網頁設計師來說仍然是會造成粗口連連的工作,
剛好對這部份有些小心得,剛才查詢了一下也沒有什麼相關資訊,
索性就厚臉皮的分享一篇。
css reset
要寫出跨瀏覽器都能顯示一致結果的css,第一件事應該就是css reset了,
這部份很多人寫我就不多說,
最熱門的兩種就是YUI css reset和Eric Meyer的版本了,
我自己習慣使用的是使用Eric Meyer的版本再稍加修改,
畢竟別人做的東西雖然方便但未必完全符合自己需求,修改之後可以用得更順手。
能通過W3C驗證的IE6、IE7 css hack寫法
大部分的教學中都是使用*和_來達成css hack,
在css的屬性前面加上*可以達到IE7的hack,而加上_則可以擺平IE6,
用起來非常方便,
不過在IE8終於追隨W3C的規範之後會在意網頁究竟能不能通過驗證的人也愈來愈多,
偏偏*和_的寫法不能過驗證,
搜尋很多資料後才找到了可以通過的寫法:
在選擇器前面加上*:first-child+html可以針對IE7 hack,
而加上* html則可以針對IE6 hack,
如此便能通過W3C驗證。
ex:
*:first-child+html #side {
margin-right: 5px;
}/*--for ie7--*/
* html #side {
margin-right: 2px;
}/*--for ie6--*/
注意針對IE6使用的* html在*號後面有一個空白字元,若是忘記加上的話也沒有辦法過驗證喔!
float的使用
一開始要做需要IE6、IE7 hack的網頁時最頭大的就是使用float的部份常常會大爆炸!
經歷過那些一測試就發現整個網頁大爆炸的日子...真是可怕。
後來發現了幾個關鍵點,修正之後世界就突然變得美好許多XD
對我來說最容易爆炸的就是使用了float的列表,
html的部份是這樣:
<ul id="top_menu">
<li><a href="#">選項一</a></li>
<li><a href="#">選項二</a></li>
<li><a href="#">選項三</a></li>
<li><a href="#">選項四</a></li>
</ul>
以前我會傻傻的寫這樣的css:
#top_menu li a {
float: left;
display: block;
background: #cccccc;
width: 100px;
height: 30px;
line-height: 30px;
margin: 10px;
border: #333333 1px solid;
color: #666666;
text-align: center;
}
很開心的在fx看見它們長得就像我心裡想的樣子:

可是等我打開IE tester之後,卻崩潰的發現...

一開始想了很多方法都解決不了,腦袋很蠢的卡在點選範圍一定要寫在a上才能感應這件事情,
於是有一陣子都只好改用絕對定位來寫,
但是這樣必須把每個項目都加上id或class,真的好煩!
後來有一天才赫然發現可以這樣寫:
#top_menu li {
float: left;
}
#top_menu li a {
display: block;
background: #cccccc;
width: 100px;
height: 30px;
line-height: 30px;
margin: 10px;
border: #333333 1px solid;
color: #666666;
text-align: center;
}
僅僅是把float搬進li層,馬上就省下好多麻煩事!
不知道還有沒有跟我一樣傻傻的把float寫進a裡面結果為了大爆炸苦惱的人...可以參考參考。
另外就是IE6對於margin範圍的判斷異於常..瀏覽器,
大多在解決float問題後還會發生爆炸都是margin問題,
試著調整一下,若還不行的話就把寬高指定固定值,再搭配overflow: hidden;通常都能夠獲得解決。
然後就可以大罵一聲IE sucks!之後收工啦XD!
寫這篇文章看看能不能幫助一些跟我一樣只知道蠻幹亂寫又沒人可以救的人~
如果只有我這麼呆...那就當作我在自嗨好啦 : ~
還是希望IE6、7早日安息,阿們。
訂閱:
意見 (Atom)