置入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技法。