置入Youtube 影片z-index 在IE中失效

有時候我們會需要在網頁上置入youtube的影片
但如果因為layout設計的關係，要在youtube影片上面再壓圖或是文字說明
在IE中，(又是IE..攤手)不管z-index設多高
都無法蓋過去
這是因為youtube的flash播放器沒有設定wmode的關係
所以我們要自己加上wmode的設定
(關於wmode的屬性可以看這裡的說明)
我在網路上找到這一篇國外的文章有說明如何解決
如果是用youtube iframe直接置入影片的方法，解決方法如下

EDM在Gmail會有空白縫隙的問題

其實這是很久之前就有的問題
不過一直忘了把它記錄下來
當我們在做EDM時
在Outlook上看沒有問題
可是到了Gmail就會出現像下圖這樣多餘的空白縫隙



解決的方式就是在img的標籤上加上下面的css屬性就可以了~

vertical-align:0;
display:block;

IE7、IE8中使用jQuery的fadeIn/fadeOut 黑邊問題

這是之前同事問我的問題
因為把瀏覽器從Firefox 換成Chrome之後就無視IE就很少開了...
上網找了一下
看到這邊有解決的方式
怕忘記所以在這邊記錄一下

$(function() {
    if(navigator.userAgent.indexOf("MSIE") != -1) {
        $('img').each(function() {
            if($(this).attr('src').indexOf('.png') != -1) {
                $(this).css({
                    'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' +
                    $(this).attr('src') +
                    '", sizingMethod="scale");'
                });
            }
        });
    }
});

[CSS]Chrome瀏覽器最小字型破解

在Chorme中將用CSS設定字體12px以下卻沒有效果，是因為Chrome為了閱讀上的方便
所以有限制字體最小就是12px
解決的方法就是在CSS加上以下這一段

-webkit-text-size-adjust:none;

但某些情況下會讓連結的底線失效
於是要再設定

display:inline-block;

就會正常了

IE9 line-height hack

:root .xxx {line-height:28px\9;}
說明：
在IE9下的行距，會在下方多4px，故在行距(line-height)設定上要多4px。
:root為根目錄選擇器，在IE8以下的版本(包含IE8)是無法辨識的，但其他瀏覽器卻是可用的。
\9為IE8、9的hack技法。

使用Compass.app寫CSS

什麼是Compass.app?

Compass.app 是和多將 compass 包成一套桌面的應用程式，在撰寫網頁CSS時，可以用較強力的 Sass 語法（是種可延伸的 CSS），來更有效率地完成工作。

之前在網路上就有看到Sass以及Compass的一些介紹
像是這裡、這裡以及這裡 。

主要的特色是巢狀式結構的撰寫法，可以自訂變數套用，或是定義一組選擇器樣式讓其他選擇器以@extend的方式繼承
也有混合@Mixins的寫法...等

Mobile Web 手機版網頁設計顯示問題

由於目前公司有製作手機版網頁的需求
但是在手機上沒有滿版顯示的問題
上網查才知道這裡跟這裡有寫到
必須加入Viewport 這個Meta標籤
為了怕忘記，所以在這裡記錄一下

Dreamweaver片段[Snippet]功能

Dreavweaver裡面的片段功能相信很多人都沒聽過
我自己也是前一份工作的時候有主管告訴我才知道有這個功能
但那時候沒有仔細研究，最近想起來才發現這個功能真的是太好用了阿



它主要的功能就是可以在Dreamweaver裡面儲存你自訂的code，
不管是Html、CSS、Java Script...等都可以

繁簡轉換-華文通 for HTML

之前提到過的網頁繁簡轉換好用工具
華文通 for HTML

不只可以大量轉換網頁檔，也能大量的轉換.txt的檔案
另外也有立即轉換的功能

使用的方法也非常簡單

UTF8編碼下的網頁繁簡轉換

繁體中文跟簡體中文轉換的 java script
是從mark 's place找來的

關於網頁設計

關於網頁設計這檔事
不清楚的人也許會有很大的誤解
就算是在從事網頁設計的人
也可能會認為，網頁設計只不過就是將頁面設計的美觀

事實上
從整個網頁的導覽動線
到內容編碼的安排
都需要深思熟慮的規劃