標籤：點擊 事件 ie7 路徑 粘貼 位移量 記錄 amp 習慣
CSS開發經驗1.盡量用class來定義樣式。盡量少使用 .div1 ul li{}這樣的樣式下去，因為如果li裡面還有<div><ul><li>這些元素的話會造成幹擾，應該給ul加個class如<ul class="ul1"></ul>這樣來寫。
2.margin:0px auto; 用於相容不同解析度的內容置中設定。
3.分享一個非常好用的CSS圖片合并網站，他能夠將使用者上傳的圖片一次合并成為一張大圖片，同時還能夠產生每張圖片的背景位置，對於減少HTTP請求非常有用。
http://cn.spritegen.website-performance.org/
4.如果用了float:left;那麼能用float:left就一直用float:left。否則左右不定，當HTML結構不合理時很麻煩。
5.絕對位置，要盡量找到離它最近的父元素作為定位基準，這樣能更好地相容解析度等問題。而且瀏覽器移動也不會漂移。
6.今天解決了一個美化一個file表單元素的美化問題，真可謂是問題多多，特此做個記錄。
按照公司的要求，上傳表單要設計成只有一個按鈕，不能夠顯示前面的文字框。
嘗試過將<input type=file>隱藏，然後通過一個div的單擊事件觸發file的單擊事件，這樣雖然file表單元素是能夠擷取到路徑，但是提交的時候，IE死活不讓提交，但是將file元素顯示之後，點擊瀏覽按鈕選擇的路徑卻能夠提交。因此得出一個未經嚴格驗證的結論。IE下的file表單元素，一定要通過滑鼠真正點擊瀏覽按鈕選擇到的路徑才會提交表單。因此此方法我廢棄了。
既然你IE一定要滑鼠真正點擊才能夠提交表單嗎？OK，那我就把input file設定為透明的，蓋在背景圖上面，然後通過字型調整後面瀏覽按鈕的大小，調到瀏覽按鈕的大小剛剛好覆蓋住背景圖片，這樣就完美了。代碼不粘貼上來了，僅僅上傳個DEMO程式，以後忘記了可以到這裡下載。
DEMO地址
7、z-index說明。
在IE中，對於定位元素，不是單純的比z-index誰大誰小，還要比其父元素的大小。此圖從園子裡一個牛人處拷來。原本地址是：http://www.cnblogs.com/Darren_code/archive/2012/03/05/z-index.html，可以看到在IE中，是先比較了父元素的z-index，然後再比較同一父元素下的子項目。圖片已經說明得很清楚。只要自己的父元素z-index不夠大， 無論自己的z-index再大，也不會蓋過其他父元素比它高的元素的子項目。
8、在布局時，不要定好了寬度，再來處理什麼padding,border,margin之類的。因為定好了寬度，如果按照這個寬度再來添加padding,border,margin，實際上這個盒子佔用的距離為padding + border + margin + content。
9、Cursot自訂游標注意的問題
css:{cursor:url(‘絕對路徑的圖片(格式：cur,ico)‘),-moz-zoom-out;}//FF下面<td width="120px"> <a>xxx</a> </td> <td> <a>xxx</a> </td> <td width="50px"> <a>xxx</a>
</td>
本來是3個td，某一天，突然中間那個加了個很長的a內容，結果在google裡就把整個table都撐大了。
後來在中間的td加了個 style="word-break:break-all;" 就搞定了。
11、IE7下濾鏡的問題：
先來看下面這一段代碼在IE7下面與Google瀏覽器下的區別：
<html><head><meta charset="utf-8" /><title></title></head><body> <div style="margin-top:300px; margin-left:300px; position:fixed; width:200px; height:200px;"> <div style=" position:relative; width:160px; height:160px; opacity: 0.9; filter:alpha(opacity=90);"> <div style=" position:absolute; left:-50px; top:-50px; width:100px; height:100px;"></div> </div> </div></body></html>
先來看Google的表現：
IE7的表現：
這裡主要的問題就是，當一個DIV設定了 filter:alpha(opacity=90);屬性之後，在IE7下，所有超越該DIV邊界的東西都會自動隱藏。暫時我還沒有找到辦法解決。
但是有繞道方案：
1、將要跨界顯示的內容，移到設定了filter的DIV之外，再用相對位移量移到適當位置。
2、加這一句代碼 *filter:; 在IE7下不啟用透明效果。對其他瀏覽器沒影響。
12、dispaly:none與visibility: hidden的區別
dispaly:none； CSS1隱藏對象。與visibility屬性的hidden值不同，其不為被隱藏的對象保留其物理空間。
visibility: hidden；設定或檢索是否顯示對象。與display屬性不同，此屬性為隱藏的對象保留其佔據的物理空間。如果希望對象為可視，其父物件也必須是可視。
| 逆心 | |
| 出處： | http://www.cnblogs.com/kissdodog/archive/2012/12/04/2801162.html |
css開發經驗&錯誤習慣
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
