21:40:16
回來後真的好無聊, 剛PO完BLOG就發現了一個BLOG版面的老BUG, 就是上版頭BLOG標題在FX跟IE7看起來非常之正常, 但是, 在IE6就會被截掉一半, 以前對CSS完全不熟, 所以一直不會改, 現在不一樣了..哈哈..就開始改吧....
先來看HTML部份...
<div id="rap">
<div id="header">
<h1><a href="http://befun.520net.to/lover" accesskey="1"> 愛轉角的天空 Love Befun Blog</a></h1>
<p>
<p>
๑۩۞۩๑ 總是為了擔心錯誤而猶豫~永遠無法實現自己的想法 ๑۩۞۩๑<br />
人們總是緬懷於過去而時常停下了自己的腳步<br />
如果說生命只有苦痛與悲傷..在跨越這一切後..是否還有其他的東西剩下來? 或許那便是真正活過的證明!!
</p>
</p>
</div>
</div>
找到控制的CSS是 rap 跟 header兩個區塊, 找到CSS設定如下(只列出有關聯的部份):
#rap {
line-height: 18px;
}
#header h1 a {
font-size: 1em;
}
問題在這, 因為font-size用 1em來設定, 在IE6上跟IE7及FX看起來大小是不一樣的(就是沒有使用Reset CSS), 而 rap 區塊內的每行高度又限定為18px, 所以當然被截斷, 而如果不限定 line-heigh , 又會每一行都變同樣大小而使版面錯亂, 而如果把 line-height 改成IE6看到的實際文字大小, 約為34px, 在FX及IE7上看起來又很不搭調, 嗯, 看來要用怪招了.....= =
想起了一個在學習CSS時的偏方, 就是如何用符號來分辦瀏覽器做CSS的小微調, 我記得以下符號代表不同意思!!
_line-height : 前面加 "_" 只有IE6可以解釋, FX及IE7看不懂.
*line-height : 前面加 "*" 只有IE7可以解釋, FX及IE6看不懂.
line-height : 前面都不加, 當然是三種都看得懂(廢話)...
所以嘍, 利用這個特點及CSS的先後宣告的優先順序, 我用這個例子來改...
首先FX跟IE7正常, 所以我要針對IE6修改, 而因為 RAP 區塊 line-height 的設定是影響上層設定, 所以我只要針對標題的 a 設定去改, 而且只能讓IE6看懂, 就變成如下結果:
#rap {
line-height: 18px;
}
#header h1 a {
_line-height: 34px;
font-size: 1em;
}
看吧, 結果都正常了, 就可以利用不同符號來表示不同意思, 而前面提到的優先順序的意思更簡單, 就是我可以先下 line-height:18px; 下一個全部都看得懂的設定項, 然後再依各瀏覽器能看得懂的符號跟著下新設定項, 這樣就會造成不同結果嘍, 請看:
#header h1 a {
line-height: 20px;
_line-height: 34px;
*line-height: 24px;
font-size: 1em;
}
這樣的意思是, 預設 line-height 為20px, 但另外用各自宣告 _ IE6為34px,* IE7為24px, 這樣子會了嗎, 是不是對這三種瀏覽器的微調方式來設計, 變得更加輕鬆了呢^^.....跟大家分享一下嘍..^^
