台新銀行最懂女人心...個屁！！

今天下午突然手機響了，來電顯示是個不認識的電話0981361591，
接起來是位...應該是阿姨級的人物，劈頭就說：
「這裡是台新銀行XXX(沒聽清楚)，小姐你有使用信用卡或現金卡嗎？」

雖然覺得丈二金剛摸不著頭腦，我還是回答她「有...啊」

於是她馬上連珠砲似的繼續說：
「那你付款的時候都是使用一次付清還是分期？」

身為一個小時候跟陌生人講話就被老爸毒打的好孩子(無誤)，
雖然她講話沒有大陸腔，我還是很警覺的發問了：
「呃...我為什麼要告訴你？我沒有使用你們的任何服務耶。」

沒想到這位阿姨很快速的爆氣了：
「這是因為我們最近有個整合的服務...整合只有一家那就不叫整合了啊！！
要不要回答隨便你！！！=皿=！！！」


然後迅雷不及掩耳的掛了我的電話 =_____=

拎阿嬤咧！莫名其妙打電話來，講沒幾句就兇我還掛電話是怎樣！？
我有求你打電話給我嗎！！？

無言的發了一陣悶氣，還是決定向台新銀行反應，
這種垃圾電話實在應該禁止！特別是垃圾人打的！=皿=
再說如果台新銀行可以有個合理的回應，對他們的觀感應該可以恢復一點。
沒想到找到台新銀行的客服專區之後竟然發現「抱怨」類要在「上班時間」撥打「市話」才行，
想到可能得到的罐頭回應......實在不願意花電話錢來買！

又找了一下終於發現線上留言的表單，
洋洋灑灑的寫完來龍去脈，按下送出......

「網頁無法顯示」


.........靠腰！！！你耍我啊！！！！！！！！
總之我真的怒了！！一輩子都不想跟台新銀行有任何關係！！
最好不要再打這種機掰電話給我！！
台新銀行最懂女人心？屁！！！
難道不知道惹熊惹虎不能惹到恰查某嗎！！

真是夠了。=皿=

能通過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早日安息，阿們。