css下margin、padding、border、background和font縮寫示例

CSS代碼簡化在工作中是非常有益的，也是必要的。在編寫CSS代碼時，經常會出現冗余的代碼，為了提高代碼的質量及文件壓縮到最小，使代碼具有可讀性，不得不把CSS代碼簡化。

margin
　　margin-top:1px;
　　margin-right:1px;
　　 margin-bottom:1px;
　　margin-left:1px;
　　代碼簡化為：margin:1px
　　margin-top:1px;
　　margin-right:2px;
　　margin-bottom:1px;
　　margin-left:2px;
　　代碼簡化為：margin:1px 2px
　　margin-top:1px;
　　margin-right:2px;
　　margin-bottom:3px;
　　margin-left:2px;
　　代碼簡化為：margin:1px 2px 3px
　　margin-top:1px;
　　 margin-right:2px;
　　margin-bottom:3px;
　　margin-left:4px;
　　代碼簡化為：margin:1px 2px 3px 4px
　　注意：當屬性值是0的時候單位可以不寫如：0px 直接就寫成0
padding
　　padding的書寫方法和margin相類似
　　padding-top:1px;
　　 padding-right:1px;
　　padding-bottom:1px;
　　padding-left:1px;
　　代碼簡化為：padding:1px
　　padding-top:1px;
　　padding-right:2px;
　　padding-bottom:1px;
　　padding-left:2px;
　　代碼簡化為：padding:1px 2px
　　padding-top:1px;
　　padding-right:2px;
　　 padding-bottom:3px;
　　padding-left:2px;
　　代碼簡化為：padding:1px 2px 3px
　　padding-top:1px;
　　padding-right:2px;
　　 padding-bottom:3px;
　　padding-left:4px;
　　代碼簡化為：padding:1px 2px 3px 4px
border
　　border-width:1px;
　　 border-style:solid;
　　border-color:#000000;
　　代碼簡化為：border:1px solid #000
background
　　background-color:#CCFFFF;
　　 background-image:url(圖片路徑);
　　background-repeat:repeat-x;
　　 background-position:5px 4px;
　　代碼簡化為：background:#CFF url(圖片路徑) repeat-x 5px 4px
font
　　font-size:26px;
　　 font-weight:bold;
　　font-family: “宋體”;
　　代碼簡化為：font:26px bold “宋體”
color屬性值
　　color:#000000;
　　color:#ff0000;
　　代碼簡化為：color:#000, color:#f00

posted @ 2010-03-12 14:17 Angle Wang 閱讀(245) | 評論 (0) | 編輯收藏

淺淡!important對CSS的重要性(轉)

CSS中的!important是一個非常重要的屬性，有時候發揮著非常大的作用，52CSS.com這方面的知識并不是非常多，我們看下面的文章，對它作比較感觀的了解。
　　前幾天寫一些CSS代碼的時候又難為我了，因為那個該死的IE6對CSS的支持是如此的差勁，以前我還沒注意過，因為做的東西基本都是基于IE的，可是我這次為博客寫的CSS要支持不止IE一個瀏覽器，可恨的是我裝的Windows 7，這里面自帶的是IE8瀏覽器，我自認為已經沒有問題了，可是打開IE6，仍然出現錯位，于是我決定看看IE6到底是什么情況。
　　我把所有的CSS塊兒全部使用邊框包起來，結果看到在IE中兩個div之間的距離明顯要寬于其他瀏覽器，比如你寫一個div的margin屬性為20px，那么在IE中就好像是40px一樣，這也就是為什么本來精度計算的剛剛好，在IE下卻偏偏錯位的原因。
　　后來我看到了!important這個屬性，這個屬性其實也是css規范中的，結果IE6愣是不支持，也正因為它不支持，才讓很多的CSSer們找到了解決的方法。一般來講，在css中，如果在同一個css塊中寫下兩個同樣的屬性，那么其實是按照最下面的來執行的，比如說：

Example Source Code [www.52css.com]

.home{
margin-left:20px;
margin-left:40px;
}

　　那么在執行的時候其實是按照40px來執行的，!important的出現就是為了讓用戶自己設置被執行語句的優先級。如果把上面的語句改為：

Example Source Code [www.52css.com]

.home{
margin-left:20px!important;
margin-left:40px;
}

　　那么在火狐、google瀏覽器以及IE7以上版本下將會按照20px來執行，而在IE6下卻仍然按照40px來執行，因為IE6并不支持!important規范，我們就可以按照這個規則來滿足IE6的設計需要，什么時候發現IE6和其他瀏覽器顯示效果不同，那么就設置兩個，在上面的一個加入!important標記，而下面的一句則不需要添加，這樣IE6就按照下面的來執行了。資深的CSSer說：如今的CSS處處!important。這可都是天殺的IE6惹的禍，大家說IE6就是一坨代謝產物一點也不為過。
　　

posted @ 2010-03-11 15:14 Angle Wang 閱讀(221) | 評論 (0) | 編輯收藏

學習中的點滴

記錄學習，工作中遇到的點點滴滴的問題。
1、需要把 background-attachment 屬性設置為 "fixed"，才能保證該屬性在 Firefox 和 Opera 中正常工作。
例子：

<html>
<head>
<style type="text/css">
   body
   {
     background-image:url('eg_bg_03.gif');
     background-repeat:no-repeat;
     background-position:center;
     background-attachment:fixed;
   }
</style>
</head>
<body>

</body>
</html>

2、

clear:both

CSS中 clear:both;可以終結在出現他之前的浮動

語法： clear : none | left |right | both

參數：

none : 允許兩邊都可以有浮動對象

both : 不允許有浮動對象

left : 不允許左邊有浮動對象

right : 不允許右邊有浮動對象

說明：該屬性的值指出了不允許有浮動對象的邊。請參閱float屬性。對應的腳本特性為clear

示例：

div { clear : left }

img { float: right }

主要是用在div套div的結構中。如果內div是浮動的，一般都需要clear浮動，不然的話內div會超出外div的框架

所用什么時候用clear:both;就很重要,一般我們在需要清除浮動的時候用到clear:both;不要輕意用到clear:both;因為它也有副伯用.

我們寫一個clear:both;的例子:

<div style="float:left;width:100px;"> clear:both第1行第1列，</div>
<div style="float:left;width:700px;"> clear:both第1行第2列，</div>
<div style="clear:both;"> clear:both第2行。</div>

3css疑難問題收集

表格與內聯對象不換行：

table{

width:30em;

table-layout:fixed;/* 只有定義了表格的布局算法為fixed，下面td的定義才能起作用。 */

}

td{

width:100%;

word-break:keep-all;/* 不換行 */

white-space:nowrap;/* 不換行 */

overflow:hidden;/* 內容超出寬度時隱藏超出部分的內容 */

text-overflow:ellipsis;/* 當對象內文本溢出時顯示省略標記(...) ；需與overflow:hidden;一起使用。*/

}

.text-overflow {

display:block;/*內聯對象需加*/

width:31em;

word-break:keep-all;/* 不換行 */

white-space:nowrap;/* 不換行 */

overflow:hidden;/* 內容超出寬度時隱藏超出部分的內容 */

text-overflow:ellipsis;/* 當對象內文本溢出時顯示省略標記(...) ；需與overflow:hidden;一起使用。*/

}

posted @ 2010-03-11 10:46 Angle Wang 閱讀(254) | 評論 (0) | 編輯收藏

隨機顯示圖片的JS代碼

關于隨機顯示圖片的代碼很多，但有的只能在IE下才有效果，如果換在Firefox或其他瀏覽器下就會失去效果，能做到兩全的JS真的很少，今天給大家介紹一個很簡單的JS隨機顯示圖片的代碼。
以下是代碼:

// JavaScript Document
var m=10; //隨機顯示圖片的總數量
var n=Math.floor(Math.random()*m+1)
document.write ("<img src='/banner/banner_"+n+".gif' border=0 galleryimg=no>");
//

上面代碼的意思是圖片保存在/banner/文件夾下，根據設置的圖片總數量，分別放入10張從banner_01.gif到banner_10.gif的圖片,在執行這個JS時，它會隨機顯示從banner_01.gif到banner_10.gif的圖片。
保存這個JS為banner.js。

在網頁相應的地方寫入調用代碼

以下是代碼:

//調用

這段代碼可以在IE和Firefox下有效顯示。

簡單的JavaScript隨機顯示圖片廣告的效果
兼容性：IE6+ FireFox2+ Opera9+

var str=new Array("http://www.sharejs.com/code/image/img/1.jpg","http://www.sharejs.com/code/image/img/2.jpg","http://www.sharejs.com/code/image/img/3.jpg");
var a;
a=str[parseInt(Math.random()*(str.length))];
document.write("<img src="+a+">");
</script>

posted @ 2010-03-04 09:47 Angle Wang 閱讀(3558) | 評論 (0) | 編輯收藏

相鄰選擇器

這個選擇器的正式名稱(根據W3C)是臨近同屬組合器。我覺得這個名稱既長又復雜，因此把它簡稱為相鄰選擇器。雖說是"相鄰"，但相鄰選擇器選取的卻是一個元素的下一個元素?；趫D3-14中的標記，圖3-24中的標記示范了相鄰選擇器的形式。

注意：

IE 6本身并不支持相鄰選擇器；請查閱本書的網址www.wrox.com/go/beginning_css2e以獲取兼容性方面的幫助。

圖 3-24

在圖3-24中，可以看到加號被用來表示兩個元素之間的相鄰關系。你在這點上也許會有疑問：這么做看起來很舒服，但實際用途是什么？難道不能單獨引用div#body來達到同樣的效果嗎？為什么需要一個相鄰選擇器？很高興你這樣問。在特定的情況下這個選擇器會發揮作用，比如當幾份HTML文檔引用同一份樣式表時。在一部分文檔中，帶有id名稱heading的<div>元素和帶有id名稱body的<div>元素是相鄰的，即它們在源文件中相繼出現。在其他文檔中這兩個元素或許不是相鄰的。如果你對這兩種理論上不同的文檔有不同的模板需求的話，自然會想通過某種方法來引用那些相鄰的元素，這就是相鄰選擇器實際應用的一個例子。正如我在上一節"直接子選擇器"中提到的那樣，有時你不想創建新的id和類名。在某些情況下，當你使用相鄰選擇器時，能夠避免創建新的類和id名稱。

在接下來的概念驗證型例子中，你將親自試驗相鄰選擇器。

試一試相鄰選擇器

例3-5 按以下步驟，了解相鄰選擇器是如何工作的。

1. 在文本編輯器中輸入以下標記：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

            "
            <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>

            <head>

            <title>Next Sibling Selectors</title>

            <link rel='stylesheet' type='text/css' href='Example_3-5.css' />

            </head>

            <body>

            <h1>Next Sibling Selectors</h1>

            <p>

            The next sibling selector (or adjacent sibling combinator as

            it's officially called) allows you to select an element based on

            its sibling. This paragraph has a lightyellow background and

            darkkhaki text.

            </p>

            <p>

            This paragraph has a yellowgreen background and green text.

            </p>

            <p>

            This paragraph has no colored background, border, or text.

            </p>

            </body>

            </html>

2. 保存上述標記為Example_3-5.html。

3. 在文本編輯器中輸入以下CSS：

body {

            font: 12px sans-serif;

            }

            p {

            padding: 5px;

            }

            h1 + p {

            background: lightyellow;

            color: darkkhaki;

            border: 1px solid darkkhaki;

            }

            h1 + p + p {

            background: yellowgreen;

            color: green;

            border: 1px solid green;

            }

4.保存樣式表為Example_3-5.css。將它在支持相鄰選擇器的瀏覽器中載入，你將看到如圖3-25所示的結果。

（點擊查看大圖）圖 3-25

工作原理

相鄰選擇器基于相鄰關系應用樣式。下面是對Example_3-5.css中有關樣式的分析。

Example_3-5.css中的第一個樣式應用于Example_3-5.html的第一段。h1 + p表示如果<p>元素是直接跟在<h1>元素后的元素，則應用本規則中的聲明。

h1 + p {

            background: lightyellow;

            color: darkkhaki;

            border: 1px solid darkkhaki;

            }

只有當<p>元素是直接與<h1>元素相鄰的元素時，這條規則才起作用。

第二條規則里使用了一個更為復雜的相鄰選擇器。它表示如果一個<p>元素直接相鄰于另一個<p>元素，并且后者也直接相鄰于一個<h1>元素時，應用本規則中的聲明。

h1 + p + p {

            background: yellowgreen;

            color: green;

            border: 1px solid green;

            }

就像直接子選擇器可以基于父子關系應用樣式一樣，相鄰選擇器可以基于相鄰關系應用樣式。

在很多時候，如果能基于元素的屬性或屬性值應用樣式會很有用。

posted @ 2010-02-26 13:10 Angle Wang 閱讀(314) | 評論 (0) | 編輯收藏

li和ul標簽用法舉例

LI代碼的格式化:
A).運用CSS格式化列表符： ul li{
list-style-type:none;
}
B).如果你想將列表符換成圖像，則： ul li{
list-style-type:none;
list-style-image: url(/blog/images/icon.gif);
}
C).為了左對齊，可以用如下代碼： ul{
list-style-type:none;
margin:0px;
}
D).如果想給列表加背景色，可以用如下代碼： ul{
list-style-type: none;
margin:0px;
}
ul li{
background:#CCC;
}
E).如果想給列表加MOUSEOVER背景變色效果，可以用如下代碼： ul{ list-style-type: none; margin:0px; }
ul li a{ display:block; width: 100%; background:#ccc; }
ul li a:hover{ background:#999; }說明：display:block;這一行必須要加的，這樣才能塊狀顯示！

F).LI中的元素水平排列,關鍵FLOAT:LEFT： ul{
list-style-type:none;
width:100%;
}
ul li{
width:80px;
float:left;
}
<ul><li>的區別
<LI> 的參數設定（常用）：
例如： <li type="square" value="4">

type="square"
只適用于非順序清單，設定符號款式，其值有三種，如下，內定為 type="disc"：
符號是當 type="disc" 時的列項符號。
符號 if" width=10 height=10 border=0> 是當 type="circle" 時的列項符號。
符號是當 type="square" 時的列項符號。
value="4"
只適用于順序清單，設定該一項的數目，其後各項將以此作為起始數目而遞增，但前面各項則不受影響，其值只能是 1,2,3.. 等整數，沒有內定值。
<UL>稱為無序清單標記。
所謂無序清單就是在每一項前面加上、、等符號，故又稱符號清單。
<UL> 的參數設定（常用）：
例如： <UL type="square">

type="square"
設定符號款式，其值有三種，如下，內定為 type="disc"：
符號是當 type="disc" 時的列項符號。
符號是當 type="circle" 時的列項符號。
符號是當 type="square" 時的列項符號。

<ul>是項目列表，<li>是列表項，項目列表就是用符號來列的，所以你列出來默認的就是黑點啦，還有一個是<ol>這個是編號列表，用數字來列的，也是用<li>做列表項
<li>是 list item 即列表項，但列表有很兩種，所以外面得有 <ul> 或者 <ol> 用來區別無序列表（小點點）和有序列表（1,2,3...）。

posted @ 2010-02-25 11:14 Angle Wang 閱讀(393) | 評論 (0) | 編輯收藏

CSS實現隔行換色2種方法

網頁設計制作,CSS實現隔行換色的2種方法:

第1種方法:
<style type="text/css">
UL.myul1 LI{background-color: expression(this.sourceIndex%2==0?'#9FB7F6':'#B6C8F8');
}
</style>
<ul class="myul1">
<li id="li1">111</li>
<li id="li2">222</li>
<li id="li2">333</li>
<li id="li2">444</li>
<li id="li2">555</li>
<li id="li2">666</li>
</ul>

第2種方法:

<div id="list01"><ul>
<li class="title"><a href="#">title</a></li>
<li><a href="#">111</a></li>
<li><a href="#">222</a></li>
<li><a href="#">333</a></li>
<li><a href="#">444</a></li>
<li><a href="#">555</a></li>
<li><a href="#">666</a></li>
</ul></div>

objName=document.getElementById("list01").getElementsByTagName("li")

for (i=0;i<objName.length;i++) {
(i%2==0)?(objName(i).className = "li01"):(objName(i).className = "li02");
}
</script>

posted @ 2010-02-25 10:35 Angle Wang 閱讀(244) | 評論 (0) | 編輯收藏

DIV CSS網頁布局：三行三列自適應高度的DIV布局

通常在DIV布局中,自適應高度一直是比較頭疼的問題,一般大都采用背景圖、外套DIV、右欄覆蓋左欄來解決?，F在加了腳本后，簡單多了，假如有三個水平并列的DIV，fbox、mbox、sbox,只要在標簽中寫入：onload="P7_equalCols('fbox','mbox','sbox')"，測試條件：ie5.x、ie6.0、FF1.03、NS7.2、opera8.01
JS代碼:版權歸原作者,僅供學習研究.
Example Source Codeom]
/*
------------------------------------------------
PVII Equal CSS Columns scripts
Copyright (c) 2005 Project Seven Development
www.projectseven.com
Version: 1.5.0
------------------------------------------------
*/
function P7_colH(){ //v1.5 by PVII-www.projectseven.com
var i,oh,hh,h=0,dA=document.p7eqc,an=document.p7eqa;if(dA&&dA.length){
for(i=0;i oh=dA[i].offsetHeight;h=(oh>h)?oh:h;}for(i=0;i dA[i].style.height=h+'px';}else{P7_eqA(dA[i].id,dA[i].offsetHeight,h);}}if(an){
for(i=0;ih){
dA[i].style.height=(h-(hh-h))+'px';}}}else{document.p7eqa=1;}
document.p7eqth=document.body.offsetHeight;
document.p7eqtw=document.body.offsetWidth;}
}
function P7_eqT(){ //v1.5 by PVII-www.projectseven.com
if(document.p7eqth!=document.body.offsetHeight||document.p7eqtw! =document.body.offsetWidth){
P7_colH();}
}
function P7_equalCols(){ //v1.5 by PVII-www.projectseven.com
if(document.getElementById){document.p7eqc=new Array;for(i=0;i document.p7eqc[i]=document.getElementById(arguments[i]);} setInterval("P7_eqT()",10);}
}
function P7_eqA(el,h,ht){ //v1.5 by PVII-www.projectseven.com
var sp=10,inc=10,nh=h,g=document.getElementById(el),oh=g.offsetHeight,ch=parseInt(g.style.height) ;
ch=(ch)?ch:h;var ad=oh-ch,adT=ht-ad;nh+=inc;nh=(nh>adT)?adT:nh;g.style.height=nh+'px';
oh=g.offsetHeight;if(oh>ht){nh=(ht-(oh-ht));g.style.height=nh+'px';}
if(nh

posted @ 2010-02-25 10:08 Angle Wang 閱讀(537) | 評論 (0) | 編輯收藏

DIV CSS網頁布局常用的方法與技巧

CSS布局常用的方法
float:none|left|right
取值：
none:　默認值。對象不飄浮
left:　文本流向對象的右邊
right:　文本流向對象的左邊

它是怎樣工作的，看個一行兩列的例子
xhtml代碼:

Example Source Code

<div id="wrap">
<div id="column1">這里是第一列</div>
<div id="column2">這里是第二列</div>
<div class="clear"></div> /*這是違背web標準意圖的，只是想說明在它下面的元素需要清除浮動*/
</div>

CSS代碼:

Example Source Code

#wrap{width:100;height:auto;}
#column1{float:left;width:40;}
#column2{float:right;width:60;}
.clear{clear:both;}

position:static|absolute|fixed|relative
取值：
static:　默認值。無特殊定位，對象遵循HTML定位規則
absolute:　將對象從文檔流中拖出，使用left，right，top，bottom等屬性相對于其最接近的一個最有定位設置的父對象進行絕對定位。如果不存在這樣的父對象，則依據body對象。而其層疊通過z-index屬性定義
fixed:　未支持。對象定位遵從絕對(absolute)方式。但是要遵守一些規范
relative:　對象不可層疊，但將依據left，right，top，bottom等屬性在正常文檔流中偏移位置

它來實現一行兩列的例子
xhtml代碼:

Example Source Code

<div id="wrap">
<div id="column1">這里是第一列</div>
<div id="column2">這里是第二列</div>
</div>

CSS代碼:

Example Source Code

#wrap{position:relative;/*相對定位*/width:770px;}
#column1{position:absolute;top:0;left:0;width:300px;}
#column2{position:absolute;top:0;right:0;width:470px;}

他們的區別在哪？
顯然，float是相對定位的，會隨著瀏覽器的大小和分辨率的變化而改變，而position就不行了，所以一般情況下還是float布局！

CSS常用布局實例
單行一列

Example Source Code

body{margin:0px;padding:0px;text-align:center;}
#content{margin-left:auto;margin-right:auto;width:400px;}

兩行一列

Example Source Code

body{margin:0px;padding:0px;text-align:center;}
#content-top{margin-left:auto;margin-right:auto;width:400px;}
#content-end{margin-left:auto;margin-right:auto;width:400px;}

三行一列

Example Source Code

body{margin:0px;padding:0px;text-align:center;}
#content-top{margin-left:auto;margin-right:auto;width:400px;width:370px;}
#content-mid{margin-left:auto;margin-right:auto;width:400px;}
#content-end{margin-left:auto;margin-right:auto;width:400px;}

單行兩列

Example Source Code

#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
#bodycenter#dv1{float:left;width:280px;}
#bodycenter#dv2{float:right;width:420px;}

兩行兩列

Example Source Code

#header{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
#bodycenter#dv1{float:left;width:280px;}
#bodycenter#dv2{float:right;width:420px;}

三行兩列

Example Source Code

#header{width:700px;margin-right:auto;margin-left:auto;}
#bodycenter{width:700px;margin-right:auto;margin-left:auto;}
#bodycenter#dv1{float:left;width:280px;}
#bodycenter#dv2{float:right;width:420px;}
#footer{width:700px;margin-right:auto;margin-left:auto;overflow:auto;clear:both;}

單行三列
絕對定位

Example Source Code

#left{position:absolute;top:0px;left:0px;width:120px;}
#middle{margin:0px190px0px190px;}
#right{position:absolute;top:0px;right:0px;width:120px;}

float定位一
xhtml代碼:

Example Source Code

<div id="wrap">
<div id="column">
<div id="column1">這里是第一列</div>
<div id="column2">這里是第二列</div>
<div class="clear"></div>/*用法web標準不建議，但是記住下面元素需要清除浮動*/
</div>
<divid="column3">這里是第三列</div>
<divclass="clear"></div>/*用法web標準不建議，但是記住下面元素需要清除浮動*/
</div>

CSS代碼:

Example Source Code

#wrap{width:100;height:auto;}
#column{float:left;width:60;}
#column1{float:left;width:30;}
#column2{float:right;width:30;}
#column3{float:right;width:40;}
.clear{clear:both;}

float定位二
xhtml代碼：

Example Source Code

<div id="center"class="column">
<h1>Thisisthemaincontent.</h1>
</div>
<div id="left"class="column">
<h2>Thisistheleftsidebar.</h2>
</div>
<div id="right"class="column">
<h2>Thisistherightsidebar.</h2>
</div>

CSS代碼：

Example Source Code

body{
margin:0;
padding-left:200px;/*LCfullwidth*/
padding-right:190px;/*RCfullwidth CCpadding*/
min-width:200px;/*LCfullwidth CCpadding*/
}
.column{
position:relative;
float:left;
}
#center{
width:100;
}
#left{
width:200px;/*LCwidth*/
right:200px;/*LCfullwidth*/
margin-left:-100;
}
#right{
width:190px;/*RCwidth*/
margin-right:-100;
}

posted @ 2010-02-25 10:04 Angle Wang 閱讀(185) | 評論 (0) | 編輯收藏

CSS Hack匯總快查

原文：http://andymao.com/andy/post/76.html

屏蔽IE瀏覽器（也就是IE下不顯示）

*:lang(zh) select {font:12px !important;} /*FF的專用*/
select:empty {font:12px !important;} /*safari可見*/
這里select是選擇符，根據情況更換。第二句是MAC上safari瀏覽器獨有的。
僅IE7識別

*+html {…}
當面臨需要只針對IE7做樣式的時候就可以采用這個HACK。
IE6及IE6以下識別

* html {…}
這個地方要特別注意很多地主都寫了是IE6的HACK其實IE5.x同樣可以識別這個HACK。其它瀏覽器不識別。
html/**/ >body select {……}
這句與上一句的作用相同。
僅IE6不識別

select { display /*IE6不識別*/:none;}
這里主要是通過CSS注釋分開一個屬性與值，流釋在冒號前。
僅IE6與IE5不識別

select/**/ { display /*IE6,IE5不識別*/:none;}
這里與上面一句不同的是在選擇符與花括號之間多了一個CSS注釋。
僅IE5不識別

select/*IE5不識別*/ { display:none;}
這一句是在上一句中去掉了屬性區的注釋。只有IE5不識別
盒模型解決方法

selct {width:IE5.x寬度; voice-family :"\"}\""; voice-family:inherit; width:正確寬度;}
盒模型的清除方法不是通過!important來處理的。這點要明確。
清除浮動

select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
在Firefox中，當子級都為浮動時，那么父級的高度就無法完全的包住整個子級，那么這時用這個清除浮動的HACK來對父級做一次定義，那么就可以解決這個問題。

截字省略號

select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
這個是在越出長度后會自行的截掉多出部分的文字，并以省略號結尾，很好的一個技術。只是目前Firefox并不支持。
只有Opera識別

@media all and (min-width: 0px){ select {……} }
針對Opera瀏覽器做單獨的設定。
以上都是寫CSS中的一些HACK，這些都是用來解決局部的兼容性問題，如果希望把兼容性的內容也分離出來，不妨試一下下面的幾種過濾器。這些過濾器有的是寫在CSS中通過過濾器導入特別的樣式，也有的是寫在HTML中的通過條件來鏈接或是導入需要的補丁樣式。

IE5.x的過濾器，只有IE5.x可見

@media tty {
i{content:"\";/*" "*/}} @import 'ie5win.css'; /*";}
}/* */
IE5/MAC的過濾器，一般用不著

[Copy to clipboard] [ - ]CODE:
/*\*//*/
@import "ie5mac.css";
/**/
IE的if條件Hack

所有的IE可識別

只有IE5.0可以識別

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

僅IE6可識別

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

僅IE7可識別

posted @ 2010-02-25 10:00 Angle Wang 閱讀(160) | 評論 (0) | 編輯收藏

僅列出標題

無可奈何花落去似曾相識燕歸來

css下margin、padding、border、background和font縮寫示例

淺淡!important對CSS的重要性(轉)

學習中的點滴

clear:both

隨機顯示圖片的JS代碼

相鄰選擇器

li和ul標簽用法舉例

CSS實現隔行換色2種方法

DIV CSS網頁布局：三行三列自適應高度的DIV布局

DIV CSS網頁布局常用的方法與技巧

CSS Hack匯總快查

導航

常用鏈接

留言簿

隨筆分類

隨筆檔案

相冊

搜索

最新評論

閱讀排行榜

評論排行榜