好用的 CSS 工具：Less 介紹

這應該算是"怪招"嘛...

http://blog.eztable.com.tw/2011/11/18/introduction-to-less/

建立div的範圍後 讓範圍內的文字超過呈現點點點...(不知道該下什麼標題...)

一般來說，當我們有需要一段文字只呈現一行的時候，我們需要請程式判斷一行內出現的文字字元數，現在可以讓CSS完成這個工作

先建立限制範圍內的div寬高
加入white-space: nowrap; \\使這段文字強制不斷行，因為我們只需要一行而不因為div的寬度限制換行
加入overflow:hidden; \\使超出div寬度的範圍後隱藏
加入text-overflow:ellipsis; \\讓文字超出範圍後可以呈現...

以下為css

p{
      height:18px;
      line-height:18px;
      width:100px;
      white-space: nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

就會變成：

原文：

歷年秋末少見的「南方低壓挾大雨」，這幾天就發生在台灣！繼本月十二日南方低壓挾雨大澆阿里山，破了該站十一月份最大雨量紀錄後，台灣昨起再受到南方低壓雲系影響，台東長濱降下三百六十二毫米的「超大豪雨」，更破了設站以來的最大單日雨量紀錄；氣象局預報中心主任鄭明典表示，往年時序走到十一月中，應已逐漸轉成乾冷天氣型態，「今年的確很特別」。

修改後：
歷年秋末少見的「南方低壓挾大雨」，這幾天就...

測試 firefox、chome、ie7、ie8、ie9 都OK  ie6 去死。


參考：http://mid.lt263.com/mb/divcssjiaocheng/14015.html 不過文中說Firefox是無效的，不過我看有效就是了...另外，他說這篇是基礎阿阿阿阿~~...

EDM設計請注意，Outlook 2007無法支援部分語法

Outllook 2007基於商業考量，Outlook 2007的網頁信件解析軟體不再是IE，而是Word2007，因此寄出的網頁形式信件必須符合Word2007規格，而非IE。

而Word 2007對於HTML的支援較少，造成許多語法是無法在outlook 2007上被正確顯現，在發包設計時要多加注意。

————————————————————————-

Word 2007 不支援以下這幾個網頁常用的 CSS 屬性：
#background-attachment
#background-image
#background-position
#background-repeat
#clear
#display
#float
#list-style-image
#list-style-position
另外，也不支援以下項目：
1. 不要使用 ＜DIV＞標籤 , 因為定位一定會出錯
2. 不要使用＜style＞＜／style＞, 如果一定要使用,
請網頁設計時將一個點就要讓它變成兩個點
例如: .test｛font-size:10pt ｝ 要改成 ..test｛font-size:10pt ｝
3. 如果要用背景圖 background語法 只有＜body＞標籤支援,其他如＜table＞＜TR＞＜TD＞
等其他標籤完全不支援background語法但支援bgcolor語法,所以如果要做背景圖或是某個
造型表格，請不要使用背景圖請直接切表格在配合使用 ＜img＞以及＜bgcolor＞這兩個語法
4.不支援Flash及Plugins
5.不支援列表清單替代圖示
6.不支援 Float 跟 Position (css裡面用來定位或是調整 Layout的語法)
7.不支援動態GIF
這個連結是 Microsoft 列出來 Outlook2007對Html的支援列表。
另外還有一個 validator, 可以測試所做出來的 Email template 是否支援 Office 2007

————————————————————————-

Outlook 2007 將採用 word 2007 取代原本的 Internet Explorer 來當做預設的 Html render 核心,
以下是一些對設計產業比較有影響的變革

No background images – Background images in divs and table cells are gone, meaning Mark’s image replacement technique is out the window.
Poor background color support – Give a div or table cell a background color, add some text to it and the background color displays fine. Nest another table or div inside though and the background color vanishes.
No support for float or position – Completely breaking any CSS based layouts right from the word go. Tables only.
Shocking box model support – Very poor support for padding and margin, and you thought IE5 was bad!
將不會有背景圖片 不管是 div, Table 裡的 Background, 將會不能使用
更差的背景顏色支援
將不支援 Float 跟 Position (css裡面用來定位或是調整 Layout的語法)
差勁的 Css 支援 (差勁的 Padding, Margin 定位, 差不多就像 IE5 對 Css 那樣差的支援度)

這個連結是 Microsoft 列出來 Outlook2007對Html的支援列表
還有一個 validator, 可以測試所做出來的 Email template 是否支援 Office 2007
其實看上列的縮圖可以輕易比較出同一個Html信件在 Outlook2000/ Outlook2007 下顯示的差別

基本上以M$ Outlook 75-80% 的市佔率, 這樣的做法已經改變了 Email 的遊戲規則, 雖然Office 2007去年11/30才發售
而使用者也有其它的WebMail Client可以選擇 (exp. Gmail, YahooMail, Hotmail….)
但是慢慢的, 這樣的變革還是會對Email行銷, 帶來一些影響

引用自http://blog.stormcrm.com:8080/it-knowledges/css-not-supported-in-outlook-2007/


--------------------------------------------------------------------------------------------
真是弱智outlook.....

CSS小技巧之DIV無內容時卻佔據空間的解決辦法(IE7)

CSS小技巧之DIV為空時佔據空間的解決辦法
　　當在div標籤內無任何內容時：

　　<div></div>

　　如果給div元素<b>設置了寬度<b>時，比如width:100%，此時div在IE中（IE6，IE7）將佔據物理空間，而在FF中不佔據物理空間（正確理解）。為了表述直觀，將樣式直接寫在元素標籤內：

　　<div style="width:100%"></div>

　　此時在IE中到底是什麼在影響著最終的顯示，又是如何解析的呢？

　　可能的影響因素：字體大小（font-size），字體行高（line-height），高度（height），溢出（overflow）

　　我們對上面的代碼逐一添加過濾屬性（具體的過程有興趣的朋友，可以私下裡實驗一下，「自己動手，豐衣足食」！）

　　在測試的過程中，你會發現IE6和IE7的解析也不盡相同，比如在給div設置了line-height:0; height:0; 的樣式後，IE7中顯示正常了，不再佔據物理空間了，而IE6卻依然我行我素，亦或是悲！

　　最終的測試結果，最簡單的方法是，給div設置高度（height）和溢出（overflow）屬性：

　　<div style="width:100%;height:0;overflow:hidden; "></div>



-------------------------------------------------------------------------------------------
轉載：http://mygaf.jack-ck.com/viewthread.php?tid=69227

IE的中英文對齊

IE遇到一排字裡有中英文數字，當裡面有各有連結，會有下底線不對齊的BUG
或是當一排中文字對好齊之後，加入英文或數字後就會頂一下空白
例：

 ←IE7看

混合中英文會變那樣


可參考http://iiu.me/archives/77此篇說明
或 http://www.wowbox.com.tw/blog/article.asp?id=2998

基本上大概就是ie在挑選字體上的標準不一樣導致的結果吧....

table表格強制斷行作法

<table width="200" border="1" style="table-layout:fixed;">
<tr>
<td style="word-wrap : break-word; ">abcdefghigklmnopqrbcdefggklmnopqrbcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyzabcdefghigklmnvwxyz 1234567890
</td>
</tr>
</table>

在table外層加入 style="table-layout:fixed;" 後
在td標籤在加上 style="word-wrap : break-word ;

css hack

	IE6	IE7	IE8	IE9	Firefox	範例
*html	V					*html .compability { color: red; }
html*	V	V				html* .compability { color: red; }
*+html		V				*+html .compability { color: red; }
!important		V	V	V	V	.compability { color: red !important; color: green; }
*	V	V				.compability { *color: red; }
_	V					.compability { _color: red; }
\9	V	V	V	V		.compability { color: red \9; }
+	V	V				.compability { +color: red; }
>		V	V	V	V	.compability > p

由於 CSS 後面的屬性會覆蓋前面的屬性

因此應該 FF 應該寫在第一個

中間是 IE7 和 IE8

最後一個才是 IE6