淘寶初始化代碼
- body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
- body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
- h1, h2, h3, h4, h5, h6{ font-size:100%; }
- address, cite, dfn, em, var { font-style:normal; }
- code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
- small{ font-size:12px; }
- ul, ol { list-style:none; }
- a { text-decoration:none; }
- a:hover { text-decoration:underline; }
- sup { vertical-align:text-top; }
- sub{ vertical-align:text-bottom; }
- legend { color:#000; }
- fieldset, img { border:0; }
- button, input, select, textarea { font-size:100%; }
常見的瀏覽器內核引擎以及具體應用：
Trident： IE；
Gecko： Firefox；
webkit： Safari，Google Chrome，遨游3，獵豹，百度；
Presto：Opera——Opera mini
書寫順序：firefox,IE8,IE7,IE6
IE6:*,_
IE7:*,+
IE8:\9,\0
chrome：-webkit-
firefox：-moz-，root（僅ff認）
- * ， ie6,ie7可以識別；
- _和- ， ie6可以識別；
- !important ,表示高優先級，ie7及以上，firefox都支持，ie6認識帶!important的樣式屬性，但不認識!important的優先級；
- -webkit- ，針對safari，chrome瀏覽器的內核CSS寫法
- -moz-，針對firefox瀏覽器的內核CSS寫法
- -ms-，針對ie內核的CSS寫法
- -o-，針對Opera內核的CSS寫法
如果只讓ie6看見用 *html .head{color:#000;}
如果只讓ie7看見用 *+html .head{color:#000;}
如果只讓ff看見用: root body .head{color:#000;}
如果只讓ff、IE8看見用 html>/**/body .head{color:#000;}
如果只是不讓ie6看見用 html>body .head{color:#000;} 即對IE 6無效
如果只是不讓ff、IE8看見用 *body .head{color:#000;} 即對ff、IE8無效
.div1{*position:relative;-moz-background-size:50%;-ms-content-zoom-limit-max:50%;-o-box-shadow:5px10px20px#f0f;}.div2{position:absoulte!important;}
第一問：寬度問題
給div一個 width：300px;padding:10px;
Firefox實際寬度320px，padding是填上去的；支持！important，IE忽略
IE6實際寬300px，padding是300px里面的，把content往里面擠；
頁面的最小寬度
IE不認得min-，而它實際上把 width當做最小寬度來使。為了讓這一命令在IE上也能用，可以把一個<div> 放到 <body> 標簽下，然后為div指定一個類,然后CSS這樣設計：
#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}
第一個min-width是正常的；但第2行的width使用了Javascript，這只有IE才認得，這也會讓你的HTML文檔不太正規。它實際上通過Javascript的判斷來實現最小寬度。
IE不認得min-，而它實際上把 width當做最小寬度來使。為了讓這一命令在IE上也能用，可以把一個<div> 放到 <body> 標簽下，然后為div指定一個類,然后CSS這樣設計：
#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}
第一個min-width是正常的；但第2行的width使用了Javascript，這只有IE才認得，這也會讓你的HTML文檔不太正規。它實際上通過Javascript的判斷來實現最小寬度。
第二問：水平居中問題
IE下只要設置body{text-align:center;}這樣就可以居中顯示。
Firefox不行 解決：body:{text-align:center;margin:0px auto;}
第三問：在mozilla firefox和IE中的BOX模型解釋不一致導致相差2px
div{margin:30px!important;margin:28px;}
第四問：CSS透明問題
IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。
[注] 最好兩個都寫，並將opacity屬性放在下面。
FF：opacity:0.6。
[注] 最好兩個都寫，並將opacity屬性放在下面。
或filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#19ffffff,endColorstr=#19ffffff);
第五問：圓角問題
IE：ie7以下版本不支持圓角。
FF： -moz-border-radius:4px
FF： -moz-border-radius:4px
瀏覽器bug
IE的雙邊距bug
設置為float的div在ie下設置的margin會加倍。這是一個ie6都存在的bug。
解決方案：在這個div里面加上display:inline;
IE的雙邊距bug
設置為float的div在ie下設置的margin會加倍。這是一個ie6都存在的bug。
解決方案：在這個div里面加上display:inline;
浮動
DIV浮動IE文本產生3象素的bug
左邊對象浮動，右邊采用外補丁的左邊距來定位，右邊對象內的文本會離左邊有3px的間距.
左邊對象浮動，右邊采用外補丁的左邊距來定位，右邊對象內的文本會離左邊有3px的間距.
#box{ float:left; width:800px;}
#left{ float:left; width:50%;}
#right{ width:50%;}
*html #left{ margin-right:-3px; //這句是關鍵}
<div id="box">
<div id="left"></div>
<div id="right"></div>
</div>
#left{ float:left; width:50%;}
#right{ width:50%;}
*html #left{ margin-right:-3px; //這句是關鍵}
<div id="box">
<div id="left"></div>
<div id="right"></div>
</div>
IE捉迷藏的問題
當div應用復雜的時候每個欄中又有一些鏈接，DIV等這個時候容易發生捉迷藏的問題。
有些內容顯示不出來，當鼠標選擇這個區域是發現內容確實在頁面。 解決辦法：對#layout使用line-height屬性 或者給#layout使用固定高和寬。頁面結構盡量簡單。
當div應用復雜的時候每個欄中又有一些鏈接，DIV等這個時候容易發生捉迷藏的問題。
有些內容顯示不出來，當鼠標選擇這個區域是發現內容確實在頁面。 解決辦法：對#layout使用line-height屬性 或者給#layout使用固定高和寬。頁面結構盡量簡單。
IE的layout私有屬性
作為外部 wrapper 的 div 不要定死高度,為了讓高度能自動適應，要在wrapper里面加上overflow:hidden; 當包含float的box的時候，高度自動適應在IE下無效，這時候應該觸發IE的layout私有屬性(萬惡的IE啊！)用zoom:1;可以做到，這樣就達到了兼容。
.colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}
排版
我們用得最多的css描述可能就是float:left.有的時候我們需要在n欄的float div后面做一個統一的背景,譬如:
<div id=”page”>
<div id=”left”></div>
<div id=”center”></div>
<div id=”right”></div>
</div>
<div id=”left”></div>
<div id=”center”></div>
<div id=”right”></div>
</div>
我們要將page的背景設置成藍色,以達到所有三欄的背景顏色是藍色的目的,但是我們會發現隨着left center right的向下拉長,而page居然保存高度不變,問題來了,原因在於page不是float屬性,而我們的page由於要居中,不能設置成 float,所以我們給他加個父元素 page變成爺爺；
高度不適應
高度不適應是當內層對象的高度發生變化時外層高度不能自動進行調節，特別是當內層對象使用margin 或paddign 時。
例：
#box { }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
<div id="box">
<p>p對象中的內容</p>
</div>
解決技巧：在P對象上下各加2個空的div對象CSS代碼：.1{height:0px;overflow:hidden;}或者為DIV加上border屬性。
高度不適應是當內層對象的高度發生變化時外層高度不能自動進行調節，特別是當內層對象使用margin 或paddign 時。
例：
#box { }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
<div id="box">
<p>p對象中的內容</p>
</div>
解決技巧：在P對象上下各加2個空的div對象CSS代碼：.1{height:0px;overflow:hidden;}或者為DIV加上border屬性。
IE6下為什么圖片下有空隙產生
解決這個BUG的技巧也有很多,可以是改變html的排版,或者設置img 為display:block 或者設置vertical-align 屬性為vertical-align:top bottom middle text-bottom 都可以解決.
解決這個BUG的技巧也有很多,可以是改變html的排版,或者設置img 為display:block 或者設置vertical-align 屬性為vertical-align:top bottom middle text-bottom 都可以解決.
IE的css bug
在p:first-letter和{font-size:300%}加上空格，也就是p:first-letter {font-size:300%}后，顯示就正常了。但是同樣的代碼，在FireFox下看是正常的。按道理說，p:first-letter{font-size:300%}的寫法是沒錯的。那么問題出在哪里呢？答案是偽類中的連字符”-”。IE有個BUG，在處理偽類時，如果偽類的名稱中帶有連字符”-”，偽類名稱后面就得跟一個空格，不然樣式的定義就無效。而在FF中，加不加空格都可以正常處理。
div設置 margin-left, margin-right 為 auto 時已經居中，IE 不行，IE需要設定body居中，首先在父級元素定義text-algin: center;這個的意思就是在父級元素內的內容居中。
垂直居中=>內容換行問題
一個高30px的div，默認顯示左上角，如果想垂直居中對其可以加個line-height:30px;樣式。如果你想讓他居下方則修改line-height
數值越大越下，為了防止撐破，還需要再給一個樣式overflow:hidden;
塊級對象設置三個樣式解決瀏覽器默認值：寬高overflow
LI中內容超過長度后以省略號顯示的技巧
此技巧適用與IE與OP瀏覽器
li {
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}
為什么web標准中IE無法設置滾動條顏色了
解決辦法是將body換成html
html {
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}
為什么無法定義1px左右高度的容器
IE6下這個問題是因為默認的行高造成的,解決的技巧也有很多,例如:overflow:hidden zoom:0.08 line-height:1px
css初始化
其中margin屬性對IE有效，padding屬性對FireFox有效。
- body,div,dl,dt,dd,ol,h1,h2,h3,h4,h5,h6,form,input,p,th,td{margin:0;padding:0;}
- img{border:0px;}
- ul {margin:0px;padding:0px;}/
- ul li {list-style:none;}
/* Clear Fix */
.clearfix:after {
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
或者這樣設置：.hackbox{ display:table; //將對象作為塊元素級的表格顯示}
太多了 參考：http://www.jb51.net/css/43686.html