何尹璇：璇璇的祕密花園 » CSS http://poet.930.info/blog 每當夜深孤獨一人的時候，我會試著寫下一些記憶　它可能是愛情，可能是生活，也可能是一種夢與痛苦的感受 Sat, 21 Jan 2012 15:22:49 +0000 en hourly 1 http://wordpress.org/?v=3.1 pre tag 標籤自動換行 http://poet.930.info/blog/2010/01/30/pre-tag/ http://poet.930.info/blog/2010/01/30/pre-tag/#comments Sat, 30 Jan 2010 09:10:34 +0000 小璇子 http://poet.930.info/blog/?p=1103 pre 標籤(tag)在內容長度超過div寬度時
會跑出難看的 Scrollbar(移動捲軸)
只要在css裡面加入這串語法就可以讓 Scrollbar 消失

?View Code CSS
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}

相容性: IE6/7/8, FF, Chrome, Opera, Safari

你可以延伸閱讀以下文章：

]]> http://poet.930.info/blog/2010/01/30/pre-tag/feed/ 0 插入 FLASH 在 Firefox 瀏覽會多一行空白 http://poet.930.info/blog/2009/04/04/firefox-flash-blank/ http://poet.930.info/blog/2009/04/04/firefox-flash-blank/#comments Sat, 04 Apr 2009 14:40:53 +0000 小璇子 http://poet.930.info/blog/?p=916 如果您製作網頁總是習慣使用各種瀏覽器預覽一遍的話

或許您發現了這件事

只要是網頁中有用到 Flash 影片的話

使用 Fireox 預覽的時候, 會發現在該 Flash 下方多了一行空白!!

而且怎麼弄都弄不掉

但是在 IE 或 Google 等其他瀏覽器看卻都是正常的!

很困擾吧!?

解決方法就是在 Flash 語法之中加入幾個字就好了

<object display:block;" classid="clsid:..">

試試看吧! *^_^

你可以延伸閱讀以下文章：

  • 此文沒有延伸閱讀喔!
]]> http://poet.930.info/blog/2009/04/04/firefox-flash-blank/feed/ 0 CSS對IE、FireFox和其它瀏覽器的控制 http://poet.930.info/blog/2008/12/29/css-browser/ http://poet.930.info/blog/2008/12/29/css-browser/#comments Mon, 29 Dec 2008 08:14:41 +0000 小璇子 http://poet.930.info/blog/?p=302 由於不同的瀏覽器，對 CSS 的解析認識不一樣，
因此會導致產生的頁面效果不一樣，得不到我們所需要的頁面效果。

這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，
讓它能夠同時相容不同的瀏覽器，進而得到我們想要的頁面效果。

由於不同的瀏覽器對於 CSS 讀取優先順序的關係。
我們根據這個來針對不同的瀏覽器來寫不同的 CSS。

比如
IE6 能識別下劃線 _ 和星號 *
IE7 能識別星號 *，當不能識別下劃線 _
而 firefox 兩個都不能認識

撰寫順序，一般是將識別能力強的流覽器的CSS寫在後面。

下面如何寫裏面說得更詳細些。

比如要分辨 IE6 和 firefox 兩種瀏覽器，可以這樣寫：

?View Code CSS
<style>
div{
background:green; /* for firefox */
*background:red;  /* for IE6 */
}
</style>

這樣出來的效果是 IE6 中看到是紅色的，在 firefox 中看到是綠色的。
解釋一下：
因為 firefox 不認識那個帶星號 * 的是什麼，於是會自動將它過濾掉，理所當然這個 div 的背景是綠色的。
在 IE6 中呢，它兩個 background 都能識別出來，於是根據優先順序別，處在後面的 red 的優先順序高，當然這個 div  的背景顏色就是紅色的了。

區分IE6，IE7，firefox 區別不同瀏覽器，CSS hack 寫法：

區別 IE6 與 FF：

?View Code CSS
background:orange; *background:blue;

區別IE6與IE7：

?View Code CSS
background:green !important; background:blue;

區別IE7與FF：

?View Code CSS
background:orange; *background:green;

區別FF，IE7，IE6：

?View Code CSS
background:orange; *background:green !important; *background:blue;

注：IE都能識別*;標準流覽器(如FF)不能識別*；
IE6 能識別 *，但不能識別 !important,
IE7 能識別 *，也能識別 !important;
FF不 能識別 *，但能識別 !important;

另外再補充一個，下劃線 "_",
IE6 支持下劃線，IE7 和 firefox 均不支持下劃線。

於是大家還可以這樣來區分 IE6，IE7，firefox

?View Code CSS
: background:orange; *background:green; _background:blue;

註：不管是什麼方法，書寫的順序都是firefox的寫在前面，IE7的寫在中間，IE6的寫在最後面。

你可以延伸閱讀以下文章：

]]> http://poet.930.info/blog/2008/12/29/css-browser/feed/ 0 文字垂直置中 http://poet.930.info/blog/2008/12/28/%e6%96%87%e5%ad%97%e5%9e%82%e7%9b%b4%e7%bd%ae%e4%b8%ad/ http://poet.930.info/blog/2008/12/28/%e6%96%87%e5%ad%97%e5%9e%82%e7%9b%b4%e7%bd%ae%e4%b8%ad/#comments Sun, 28 Dec 2008 15:19:52 +0000 小璇子 http://poet.930.info/blog/?p=300 水平置中為 text-align: center;
垂直置中只需要把 line-height 的高度設成跟外部區塊的 height 相同即可。

你可以延伸閱讀以下文章：

]]> http://poet.930.info/blog/2008/12/28/%e6%96%87%e5%ad%97%e5%9e%82%e7%9b%b4%e7%bd%ae%e4%b8%ad/feed/ 1 Font-size Adjustment http://poet.930.info/blog/2007/12/20/font-size-adjustment/ http://poet.930.info/blog/2007/12/20/font-size-adjustment/#comments Thu, 20 Dec 2007 07:27:38 +0000 小璇子 http://poet.930.info/blog/2007/12/20/font-size-adjustment/ px 和 em 的差異

  • CSS 定義文字大小儘量使用 em 或 % ，因為「px 」or 「pt」會使 IE 對文字失去可調性
     
  • 至於文字間的間距則可使用 px（不然螢幕畫面一放大間距也會跟著放大，影響整個版面外觀）
    • em的值並不是固定的
    • em會繼承父級元素的字體大小
       
  • 適當的調整字距與行距，讓文字與文字之間有個喘息的空間
    • CSS 定義字距: 字距: letter-spacing / 行距: lline-height
If you want this size in pixels (px) Declare this percent (%)
10 77
11 85
12 93 (was 93)
13 100
14 108 (was 107)
15 116 (was 114)
16 123.1 (was 122)
17 131 (was 129)
18 138.5 (was 136)
19 146.5 (was 144)
20 153.9 (was 152)
21 161.6 (was 159)
22 167
23 174
24 182
25 189
26 197
 

你可以延伸閱讀以下文章：

]]> http://poet.930.info/blog/2007/12/20/font-size-adjustment/feed/ 0 Div+CSS網頁佈局三欄頁CSS float方法 http://poet.930.info/blog/2007/12/19/css-float/ http://poet.930.info/blog/2007/12/19/css-float/#comments Wed, 19 Dec 2007 14:58:17 +0000 小璇子 http://poet.930.info/blog/2007/12/19/divcss%e7%b6%b2%e9%a0%81%e4%bd%88%e5%b1%80%e4%b8%89%e6%ac%84%e9%a0%81css-float%e6%96%b9%e6%b3%95/ 三欄佈局是目前最常見的網頁佈局，主要頁內容放在中間一欄，邊上的兩欄放置導航鏈結之類的內容。基本佈局一般是標題之下放置三欄，三欄佔據整個頁面的寬度，最後在頁的底端放置頁腳，頁腳也佔據整個頁面寬度。

絕大多數網頁設計者都熟悉傳統的網頁設計技術，用這些技術可以生成帶有表格、創建固定寬度佈局或者“液態”（它可以根據用戶流覽器視窗寬度自動伸縮）佈局的網頁。

現在，我們都開始拋棄基於表格的佈局技術，許多網路設計者正在從 XHTML標記和 CSS格式這一新範例中尋找創建三欄佈局的方法。用絕對定位的方法從CSS中得到固定寬度的佈局並不困難；但是得到液態佈局就有點困難了。因此，本文介紹一種用 CSS的 float和 clear屬性來獲得三欄液態佈局的方法。

基本方法：基本的佈局包含五個div，即標題、頁腳和三欄。標題和頁腳佔據整個頁寬。左欄div和右欄div都是固定寬度的，並且用float屬性來把它們擠壓到流覽器視窗的左側和右側。中欄實際上佔據了整個頁寬，中欄的內容在左、右兩欄之間“流淌”。由於中欄div的寬度並不固定，因此它可以根據流覽器視窗的改變進行必要的伸縮。中欄div的左側和右側的填充（padding）屬性保證內容安排在一個整齊的欄中，甚至當它伸展到邊欄（左欄或者右欄）的底端也是這樣。
三欄佈局的一個例子：請看看用本文所介紹的技術進行三欄佈局的例子。這個例子用鮮豔的顏色來區分佈局的各個div。
XHTML代碼：

?View Code CSS
<body>
<div id="header">
    <h1>Header</h1>
</div>
<div id="left">
    Port side text...
</div>
<div id="right">
    Starboard side text...
</div>
<div id="middle">
    Middle column text...
</div>
<div id="footer">
    Footer text...
</div>
</body>

CSS代碼：

?View Code CSS
body {
    margin: 0px;
    padding: 0px;
}
div#header {
    clear: both;
    height: 50px;
    background-color: aqua;
    padding: 1px;
}
div#left {
    float: left;
    width: 150px;
    background-color: red;
}
div#right {
    float: right;
    width: 150px;
    background-color: green;
}
div#middle {
    padding: 0px 160px 5px 160px;
    margin: 0px;
    background-color: silver;
}
div#footer {
    clear: both;
    background-color: yellow;
}

代碼演示：

?View Code CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>52css.com</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
div#header {
clear: both;
height: 50px;
background-color: aqua;
padding: 1px;
}
div#left {
float: left;
width: 150px;
background-color: red;
}
div#right {
float: right;
width: 150px;
background-color: green;
}
div#middle {
padding: 0px 160px 5px 160px;
margin: 0px;
background-color: silver;
}
div#footer {
clear: both;
background-color: yellow;
}
</style>
</head>
<body>
<div id="header">
<h1>Header - poet.930.info</h1>
</div>
<div id="left">
Port side text...
</div>
<div id="right">
Starboard side text...
</div>
<div id="middle">
Middle column text...
</div>
<div id="footer">
Footer text...poet.930.info
</div>
</body>
</html>

代碼說明

HTML代碼中各部分出現的順序是非常重要的。
左欄和右欄 div必須在中欄之前出現。
這樣才可以讓這兩個邊欄浮動到它們的位置上（螢幕兩側），並讓中欄的內容將“流”入它們之間的空間。如果流覽器在一個或者兩個邊欄div之前先發現中欄，那麼中欄將佔據螢幕的一側或者兩側，這樣浮動的部分就會跑到中欄的下面而不是中欄的旁邊了。

div#header和 div#footer樣式（style）中的 clear:both申明用來確保這浮動部分不會佔據標題和頁腳的空間。
div#header樣式中的 padding:1px申明用來消除頁頭背景色中的異常邊，如果padding設置為零，那麼在Netscape瀏覽器中就會看到這個異常。

div#left樣式中的float:left申明是用來把左欄擠壓到左側。width:150px申明用來設置欄的固定寬度，不過你也可以把它的寬度設置為其他具體值。類似的，div#right樣式中的float:right申明用來把右欄div擠壓到右側。在本例中，float把左欄和右欄完全擠壓到流覽器視窗的左邊緣和右邊緣。然而，如果這些div被其他div包含，那麼float將會把它們擠壓到包含它們的div的邊緣。

在div#middle樣式中，clear申明允許中欄的內容“流淌”在兩個邊欄之間。padding:0px 160px 5px 160px申明設置了到左欄和右欄的填充，這樣允許150像素寬度的欄 div，在加上 10像素的間距。

這個例子非常粗糙和簡單，但是它很好的演示了用浮動 div來創建三欄液態佈局的邊欄這一基本技術。

你可以延伸閱讀以下文章：

]]> http://poet.930.info/blog/2007/12/19/css-float/feed/ 0