.cl0 {list-style-type: none;}
.cl1 {list-style-type: disc;}
.cl2 {list-style-type: circle;}
2010/04/16
list-style-type CSS2
2010/03/25
ie6, ie7 不認得 inline-block 解決辦法
重複設定元素的 display 兩次, 先設定 *inline-block 再設定 inline,
ie6 與 ie7 即可使用 inline-block
display:inline-block;
}
div1{
*display:inline; <---*號為hack for ie6 and ie7, 這樣才不影響其他browsers
}
2010/03/24
jQuery String Replace 字串取代
ex:
html code:
<img alt="" src="images/left/21_off.jpg" />
<img alt="" src="images/left/22_off.jpg" />
<img alt="" src="images/left/23_off.jpg" />
jQuery code:
function MVHandler(){
var path = $(this).attr("src");
var newPath = path.replace("off","on"); <--("被取代","取代")
$(this).attr({src:newPath})
}
html code:
<img alt="" src="images/left/21_off.jpg" />
<img alt="" src="images/left/22_off.jpg" />
<img alt="" src="images/left/23_off.jpg" />
jQuery code:
function MVHandler(){
var path = $(this).attr("src");
var newPath = path.replace("off","on"); <--("被取代","取代")
$(this).attr({src:newPath})
}
2010/03/09
ie7-js A JavaScript library to make MSIE behave like a standards-compliant browser.
About
IE7.js is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.
Conditional Comments [if IE] : ie 專用 (ie only) 條件式 html 註解的語法
Conditional Comments [if IE] : ie 專用 (ie only) 條件式 html 註解的語法
<!--[if IE]>內容<![endif]-->
內容只有 ie 會顯現。
<!--[if IE 6]>內容<![endif]-->
內容只有 ie6 會顯現。
<!--[if lt IE 7]>內容<![endif]-->
內容只在比 ie7 更舊的版本會顯現。 [參考說明]
<!--[if gte IE 8]>內容<![endif]-->
內容只有 ie8 及其較新版本會顯現。 [參考說明]
<!--[if !IE]>-->內容<!--<![endif]-->
內容除 ie 以外都會顯現。 [參考說明]
<!--[if !(IE 6)]>內容<![endif]-->
內容除 ie6 以外的 ie 都會顯現。 [參考說明]
<!--[if (gte IE 6)&(lt IE 8)]>內容<![endif]-->
內容只從 ie6 以後及 ie8 之前版本會顯現。 [參考說明]
<!--[if (IE 7)|(IE 6)]>內容<![endif]-->
內容只有 ie7 及 ie6 會顯現。 [參考說明]
<!--[if gte IE 7]><!-->內容<!--<![endif]-->
內容在 ie7 及其較新版本，以及 ie 以外都會顯現。 [參考說明]
藍色部分 <!-- 或 --> 為標準 html 註解的起始或結尾；除此之外，紅色部分即為 ie 能辨識的特殊語法。所以，只有 ie 會依據紅字所表示的條件來判斷呈現與否，而其它瀏覽器依標準一律當成是註解。
語法中空格不能任意省去，尤其注意 IE 之後，版本編號前的空格。除 IE 必須大寫，其餘英文字母都是小寫。註解的結尾語法都是 <![endif]--> 。
思考 - 條件式註解的應用
運用不同條件可在不同版本呈現的原理，我們可以做出提供使用者，類似瀏覽器版本線上偵測的範例 ：
xhtml 語法
<!--[if IE]>
<p>您正在使用的瀏覽器為 ie 。</p>
<![endif]-->
<!--[if IE 6]>
<p>您正在使用的瀏覽器為 ie6 。</p>
<![endif]-->
<!--[if IE 7]>
<p>您正在使用的瀏覽器為 ie7 。</p>
<![endif]-->
<!--[if lt IE 7]>
<p>您正在使用的瀏覽器為比 ie7 較舊的版本。</p>
<![endif]-->
<!--[if gte IE 8]>
<p>您正在使用的瀏覽器為 ie8 或比 ie8 更新的版本。</p>
<![endif]-->
<!--[if !IE]>-->
<p>您正在使用的瀏覽器不是 ie 。</p>
<!--<![endif]-->
<!--[if !(IE 6)]>
<p>您正在使用的瀏覽器為 ie ，但不是 ie6 。</p>
<![endif]-->
<!--[if (gte IE 5.5)&(lt IE 7)]>
<p>您正在使用的瀏覽器為 ie5.5 或 ie6 。</p>
<![endif]-->
<!--[if (IE 7)|(IE 6)]>
<p>您正在使用的瀏覽器為 ie7 或 ie6 。</p>
<![endif]-->
<!--[if gte IE 7]><!-->
<p>您正在使用的瀏覽器為 ie7 或比 ie7 更新的版本，或不是使用 ie 。</p>
<!--<![endif]-->
上面的語法實際呈現如下，請使用不同瀏覽器測試。
您正在使用的瀏覽器不是 ie 。
您正在使用的瀏覽器為 ie7 或比 ie7 更新的版本，或不是使用 ie 。
ie Conditional Comments 幾乎可以包圍任何 html 內容，包括整個元素 (elements) 或單獨的標籤 (tags) ；這屬於 html 語法，只適用在 html 語法內，出現在其它如 css 語法裡或 javascript 程式裡是會錯誤的。有時候我們因某些狀況不得不使用 ie 自創專有的語法，又必須符合 w3c 標準語法規範，或是需要避開 ie 的錯誤，又為了避免與其它瀏覽器發生衝突，條件式註解就成了有用的技巧。
條件註解當作 css hacks
僅供 ie6 及其較舊版套用的樣式清單檔
<!--[if lte IE 6]>
<link href="style_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
條件註解讓 javascript 在指定的瀏覽器執行
僅供 ie 執行的 javascript 程式檔
<!--[if IE]>
<script src="script_ie.js" type="text/javascript"></script>
<![endif]-->
註解裡的運算子 (operators) : lt, lte, gt, gte…
語法中除了 if, IE 比較容易體會含意外，其餘看似難懂的符號，列出來解釋一下就容易了。
* lt : lower than ，比某一版本更舊的版本，如 [if lt IE 7] 。
* lte : lower than or equal to ，某一版本及其更舊的版本，如 [if lte IE 6] 。
* gt : greater than ，比某一版本更新的版本，如 [if gt IE 6]。
* gte : greater than or equal to ，某一版本及其更新的版本，如 [if gte IE 8] 。
* ! : 「非」、「排除」、「反向」的意思，可加在版本、運算子、或子運算式 ( ) 前，如 [if !IE] ，指定 ie 以外有效。
* ( ) : 可將基本的條件加入子運算式 (subexpression) 處理更複雜的條件，如 [if !(IE 6)] ，指定除 ie6 以外的 ie 有效。。
* & : 符合由 & 連接的全部子運算式的條件，如 [if (gt IE 5.0)&(lt IE 7)] ，指定 ie5 之後， ie7 之前有效。
* | : 符合由 | 連接的任一個子運算式的條件，如 [if (IE 5.5)|(IE 6)] ，指定 ie5.5 或是 ie6 有效。
所以， [if lte IE 6] 和 [if lt IE 7] 同樣指的都是 ie6 及其更舊版本，而 [if gt IE 6]與 [if gte IE 7] 同指 ie7 及其較新版本。
實際上，常用的運算子應該只有前面五項，所以沒有特別需求的話，不需要浪費太多時間鑽研每一項的用法囉！
稍作變化才能正確用在 ie 以外瀏覽器
在前面語法中，關於 ie 以外瀏覽器顯現的作法，加了一點東西，這是將 ie 專用註解語法 (紅色部分) ，再加註解標記，變成前後兩部分 html 標準註解 (注意藍色部分) ，才可以讓內容不再是註解；而 ie 仍舊以原來特殊語法判斷，不會理會另外加的符號，如此既能區分瀏覽器，又不會違反 w3c 標準語法。另外需要注意的是，如果同時也要讓某些 ie 顯現 (如最後一項) ，就必須動點手腳，如 [if gte IE 7]><!--> 中多加了 <! (綠色) ，只是為了避免 ie 會把接下去的 --> 顯示出來。
類似運用註解的方法在許多應用軟體也常見到，例如 Adobe Dreamweaver 裡的範本 (templates) 標籤、圖庫 (library) 標籤，也都是運用註解標註的方式讓特定的應用軟體來辨識，所以瀏覽器只會把它們當成註解而已，多留意看看就會發現其中的奧妙了。
截自: http://boohover.pixnet.net/blog/post/12309095
<!--[if IE]>內容<![endif]-->
內容只有 ie 會顯現。
<!--[if IE 6]>內容<![endif]-->
內容只有 ie6 會顯現。
<!--[if lt IE 7]>內容<![endif]-->
內容只在比 ie7 更舊的版本會顯現。 [參考說明]
<!--[if gte IE 8]>內容<![endif]-->
內容只有 ie8 及其較新版本會顯現。 [參考說明]
<!--[if !IE]>-->內容<!--<![endif]-->
內容除 ie 以外都會顯現。 [參考說明]
<!--[if !(IE 6)]>內容<![endif]-->
內容除 ie6 以外的 ie 都會顯現。 [參考說明]
<!--[if (gte IE 6)&(lt IE 8)]>內容<![endif]-->
內容只從 ie6 以後及 ie8 之前版本會顯現。 [參考說明]
<!--[if (IE 7)|(IE 6)]>內容<![endif]-->
內容只有 ie7 及 ie6 會顯現。 [參考說明]
<!--[if gte IE 7]><!-->內容<!--<![endif]-->
內容在 ie7 及其較新版本，以及 ie 以外都會顯現。 [參考說明]
藍色部分 <!-- 或 --> 為標準 html 註解的起始或結尾；除此之外，紅色部分即為 ie 能辨識的特殊語法。所以，只有 ie 會依據紅字所表示的條件來判斷呈現與否，而其它瀏覽器依標準一律當成是註解。
語法中空格不能任意省去，尤其注意 IE 之後，版本編號前的空格。除 IE 必須大寫，其餘英文字母都是小寫。註解的結尾語法都是 <![endif]--> 。
思考 - 條件式註解的應用
運用不同條件可在不同版本呈現的原理，我們可以做出提供使用者，類似瀏覽器版本線上偵測的範例 ：
xhtml 語法
<!--[if IE]>
<p>您正在使用的瀏覽器為 ie 。</p>
<![endif]-->
<!--[if IE 6]>
<p>您正在使用的瀏覽器為 ie6 。</p>
<![endif]-->
<!--[if IE 7]>
<p>您正在使用的瀏覽器為 ie7 。</p>
<![endif]-->
<!--[if lt IE 7]>
<p>您正在使用的瀏覽器為比 ie7 較舊的版本。</p>
<![endif]-->
<!--[if gte IE 8]>
<p>您正在使用的瀏覽器為 ie8 或比 ie8 更新的版本。</p>
<![endif]-->
<!--[if !IE]>-->
<p>您正在使用的瀏覽器不是 ie 。</p>
<!--<![endif]-->
<!--[if !(IE 6)]>
<p>您正在使用的瀏覽器為 ie ，但不是 ie6 。</p>
<![endif]-->
<!--[if (gte IE 5.5)&(lt IE 7)]>
<p>您正在使用的瀏覽器為 ie5.5 或 ie6 。</p>
<![endif]-->
<!--[if (IE 7)|(IE 6)]>
<p>您正在使用的瀏覽器為 ie7 或 ie6 。</p>
<![endif]-->
<!--[if gte IE 7]><!-->
<p>您正在使用的瀏覽器為 ie7 或比 ie7 更新的版本，或不是使用 ie 。</p>
<!--<![endif]-->
上面的語法實際呈現如下，請使用不同瀏覽器測試。
您正在使用的瀏覽器不是 ie 。
您正在使用的瀏覽器為 ie7 或比 ie7 更新的版本，或不是使用 ie 。
ie Conditional Comments 幾乎可以包圍任何 html 內容，包括整個元素 (elements) 或單獨的標籤 (tags) ；這屬於 html 語法，只適用在 html 語法內，出現在其它如 css 語法裡或 javascript 程式裡是會錯誤的。有時候我們因某些狀況不得不使用 ie 自創專有的語法，又必須符合 w3c 標準語法規範，或是需要避開 ie 的錯誤，又為了避免與其它瀏覽器發生衝突，條件式註解就成了有用的技巧。
條件註解當作 css hacks
僅供 ie6 及其較舊版套用的樣式清單檔
<!--[if lte IE 6]>
<link href="style_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
條件註解讓 javascript 在指定的瀏覽器執行
僅供 ie 執行的 javascript 程式檔
<!--[if IE]>
<script src="script_ie.js" type="text/javascript"></script>
<![endif]-->
註解裡的運算子 (operators) : lt, lte, gt, gte…
語法中除了 if, IE 比較容易體會含意外，其餘看似難懂的符號，列出來解釋一下就容易了。
* lt : lower than ，比某一版本更舊的版本，如 [if lt IE 7] 。
* lte : lower than or equal to ，某一版本及其更舊的版本，如 [if lte IE 6] 。
* gt : greater than ，比某一版本更新的版本，如 [if gt IE 6]。
* gte : greater than or equal to ，某一版本及其更新的版本，如 [if gte IE 8] 。
* ! : 「非」、「排除」、「反向」的意思，可加在版本、運算子、或子運算式 ( ) 前，如 [if !IE] ，指定 ie 以外有效。
* ( ) : 可將基本的條件加入子運算式 (subexpression) 處理更複雜的條件，如 [if !(IE 6)] ，指定除 ie6 以外的 ie 有效。。
* & : 符合由 & 連接的全部子運算式的條件，如 [if (gt IE 5.0)&(lt IE 7)] ，指定 ie5 之後， ie7 之前有效。
* | : 符合由 | 連接的任一個子運算式的條件，如 [if (IE 5.5)|(IE 6)] ，指定 ie5.5 或是 ie6 有效。
所以， [if lte IE 6] 和 [if lt IE 7] 同樣指的都是 ie6 及其更舊版本，而 [if gt IE 6]與 [if gte IE 7] 同指 ie7 及其較新版本。
實際上，常用的運算子應該只有前面五項，所以沒有特別需求的話，不需要浪費太多時間鑽研每一項的用法囉！
稍作變化才能正確用在 ie 以外瀏覽器
在前面語法中，關於 ie 以外瀏覽器顯現的作法，加了一點東西，這是將 ie 專用註解語法 (紅色部分) ，再加註解標記，變成前後兩部分 html 標準註解 (注意藍色部分) ，才可以讓內容不再是註解；而 ie 仍舊以原來特殊語法判斷，不會理會另外加的符號，如此既能區分瀏覽器，又不會違反 w3c 標準語法。另外需要注意的是，如果同時也要讓某些 ie 顯現 (如最後一項) ，就必須動點手腳，如 [if gte IE 7]><!--> 中多加了 <! (綠色) ，只是為了避免 ie 會把接下去的 --> 顯示出來。
類似運用註解的方法在許多應用軟體也常見到，例如 Adobe Dreamweaver 裡的範本 (templates) 標籤、圖庫 (library) 標籤，也都是運用註解標註的方式讓特定的應用軟體來辨識，所以瀏覽器只會把它們當成註解而已，多留意看看就會發現其中的奧妙了。
截自: http://boohover.pixnet.net/blog/post/12309095
2010/03/02
list-style-image在ie6跟ie7顯示不出來
通常是因為下了
* {
margin:0;
padding:0;
}
導致圖檔跑到看不見的地方
在ul下
padding-left:15px;
即可(通常為15~20px)
但可能因此影響到ul位置,需再做調整
* {
margin:0;
padding:0;
}
導致圖檔跑到看不見的地方
在ul下
padding-left:15px;
即可(通常為15~20px)
但可能因此影響到ul位置,需再做調整
2010/03/01
如何修正DIV 指定float之後導致外容器無法撐開
初碼:
<div style="border: 1px solid red; width:120px;">
<div style="border: 1px solid green; float: left; width: 30%; height: 80px;">DIV1</div>
<div style="border: 1px solid red; width:120px;">
<div style="border: 1px solid green; float: left; width: 30%; height: 80px;">DIV1</div>
2010/02/26
10 golden rules for building successful web apps, from Fred Wilson
Fred Wilson from Union Square Ventures opened up Future of Web Apps in Miami this morning with his top ten tips for creating a successful web app:
訂閱：
文章 (Atom)