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

IE的if條件Hack

IE的if條件Hack
IE的if條件Hack可以讓IE區別於其它流覽器和IE個版本之間的流覽器，它利用<!--[if IE]>...<![endif]-->這樣的語法讓IE流覽器對齊進行解析，屬於IE專有。

<!--[if IE]> Only IE <![endif]-->

所有的IE可識別

<!--[if IE 5.0]> Only IE 5.0 <![endif]-->

只有IE5.0可以識別

<!--[if gt IE 5.0]> Only IE 5.0+ <![endif]-->

IE5.0包換IE5.5都可以識別

<!--[if lt IE 6]> Only IE 6- <![endif]-->

僅IE6可識別

<!--[if gte IE 6]> Only IE 6/+ <![endif]-->

IE6以及IE6以下的IE5.x都可識別

<!--[if lte IE 7]> Only IE 7/- <![endif]-->

僅IE7可識別

<!--[if IE]>...<![endif]-->之間內容的具體用法：

<!--[if IE 7]> <link rel="stylesheet" href="../css/ie7.css" type="text/css" media="screen" /><![endif]-->

可以像這樣連結一個CSS檔

<!--[if IE]>

<style>

.clearfix {display: inline-block;}

</style>

<![endif]-->

也可以像這樣直接輸入一行CSS代碼

比較不常見的CSS屬性

設定繁體字型的英文名稱：

微軟正黑體 : Microsoft JhengHei
新細明體 : PMingLiU
細明體 : MingLiU
標楷體 : DFKai-sb
中黑體吧?:MS PGothic,

PS.ie與ff可以設定中文字型的名字、而chrome只能吃英文的名字


CSS強制不斷行：
white-space: nowrap;
word-break:keep-all;
word-wrap:normal;

CSS強制斷行：
word-wrap:break-word;
word-break:break-all;

Chrome專用屬性：
-webkit-text-size-adjust:none;
因為chrome不支援10px以下的字級，所以要用10px以下要加入這個屬性

用CSS判斷圖片的最大寬度後以適應區塊大小

當我需要設定一個圖片最小為120X120時
載入的圖片超過我設定的大小就判斷等比例縮放大小
以下為CSS設定

img {
      max-width:120px;//設定載入的圖片寬度最大為120
      height:inherit;//自適應高度(可以超過120，因為等比縮放，所以有可能寬縮放到120後高度高於120)
      width:expression(document.body.clientWidth>120?”120px”:”auto”);//圖片的判斷式，設定超過120就縮放
      overflow:hidden;//超過隱藏
}

以上適用ie7,ie9, ff, google chrome
唯獨ie8會有點小問題