簡易解決圖片置中問題(自認為....)

基本上...這只能解決有固定高度與寬的DIV內的圖片置中，如果不設定高度與寬度...就會無法呈現上下左右圖片置中問題...

可先參考此篇：http://www.cnblogs.com/shabingliang/archive/2008/09/15/1291115.html
(以上此篇隨邊找都能找到一模一樣的內容文章...真的是相似度極高阿...)

以下是我針對實作修改後的樣式


<style>
.photoLists { width:201px; height:134px; position:relative;}
.photoBox { position:absolute; left:-1px;}
.photoListImg { float:left; margin:1px; background:#CCC url(/img/album/photoBg.gif);}/*設定放圖片的樣式
.photoLists a {
 /*非IE的置中方法*/
 display: table-cell;
 vertical-align:middle;
 text-align:center;

 /*針對IE的hack */
 *display: block;
 *font-size:56px;/*約為高度的0.873，65*0.873 約為56 (PS1.要將放置圖片的div高度乘以0.873倍*/)
 *font-family:Arial;/*防止非utf-8引起的hack失效，如gbk編碼*/

 width:65px;
 height:65px;
 }
 .photoLists img {
 /*設置圖片置中*/
 vertical-align:middle;
 }

</style>

<div class="photoBox">

<div class="photoListImg">

<a href="#">

<img src="img.gif" width="50" height="50" />

</a>

</div>

</div>

--------------------------------------------------------------------------------

所以以上..解決了我在三大瀏覽器上的圖片置中問題
firefox、chrome、IE7.8.9 都OK

雖說有點怪招，卻很簡易....自己試了很久都試不出來，GOOGLE一下就試出來了

(GOOGLE真是神)

PS1.關於0.873是怎麼來的，上網又查了一下..說是："抓出特定字型在 IE font-size 和所產生行高的比例，然後就以此比例來算出要垂直置中 font-size 該設多少。他算出來字型 Arial 的比例是 0.873"....balabala..

可參考此篇：http://blog.xuite.net/vexed/tech/22551671

此篇還有額外的應用實例可參考(果然還是繁體好)

還有好多好多延伸閱讀...

但我很懶.......
很懶的打字
很懶的作編輯
..............................

........

...

好用的 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 ;