- Favicon
以下的方法能在iPhone 和 iPad中加入favicon,而icon的size為60px X 60px。
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> - 使用
<!--[if IE]>要注意的事件
因為ie的不同版本，我們通常都會使用<!--[if IE]>來針對不同的ie版面進行設定。但是這樣做會出現一個問題，當我們在頁面中加入這句判斷時，將導致瀏覽器把所有css file都下載後才繼續下載網頁的其他部份，會影響了整個網頁的下載進度。
要解決這個問題其實很簡單，就是在網頁的開頭就加入一句空的判斷：<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!--[if IE 6]><![endif]—>
<html>
<head>
詳情可以參考: http://www.phpied.com/conditional-comments-block-downloads/
- 不要再使用
類似以下的方式進行針對ie版本的設定<!--[if IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="css/ie7.css" />
< ![endif]—>
以上是現在最常見的方式，但其實這個方式並不是最合適的。因為這樣做的話，我們就需要多一個http request，這將減慢我們的網頁速度。如何解決？使用以下方法替換：<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie8"> <![endif]-->
<!--[if IE 9 ]> <body class="ie9"> <![endif]-->
<!--[if gt IE 9]> <body> <![endif]-->
<!--[if !IE]><!--> <body> <!--<![endif]—>
這樣做的話，我們只需要在同一個css file裏，不需要透過css hack就可以針對各個ie的版本進行設定，如下：
div.foo { color: inherit;}
.ie6 div.foo { color: #ff8000; } - 設定後備的local file.
現在越來越多人會直接使用google提供的library庫，來提升自已的網頁速度，因為用家很有可能已經在瀏覽其他網頁時不知不覺得地有了caching。但是萬一google的link出現了問題導致我們的功能失敗，那麼就麻煩了，為保不失，以下方法可以為自已設立一個後備的local file：<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"></script>')</script> - 以下方法可以使webkit中的文字變得更加
smooth：
html { -webkit-font-smoothing: antialiased; } - 強制顯示scrollbar
有時候因為網頁比較長,所以瀏覽器自然地會出現scrollbar,相反比較短時就不會出現,這樣會導致轉頁時會出現闊度不一的問題,看下去沒有那麼齊整。要解決這個問題,我們可以強制瀏覽器顯示scrollbar:
html { overflow-y:scroll; } - 讓label跟input對齊: input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
雜項備忘(1)
訂閱：
張貼留言 (Atom)
沒有留言:
張貼留言