成人国产一区二区三区精品麻豆,激情五月宗合网,97视频在线看

- 龍誠動態
 
 行業新聞
 
 我們的觀點
 
 公司公告
 
 建站技術
 
 網站SEO優化
 
 網站制作流程
 
 產品報價
 - 聯系電話：0577-55882408
 - 傳真號碼：0577-55882411
 - 聯系手機：15224122065
 - 聯系地址：溫州市甌海站南商貿城C幢306
- - 首頁-新聞中心-建站技術
 一、 IE 與 FireFox 的 js 和 css png 透明 AlphaImageLoader filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=bEnabled,sizingMethod=sSize,src=sURL) enabled ：可選項。布爾值(Boolean) 。設置或檢索濾鏡是否激活。true ：默認值。濾鏡激活。false ：濾鏡被禁止。 sizingMethod ：可選項。字符串(String) 。設置或檢索濾鏡作用的對象的圖片在對象容器邊界內的顯示方式。crop ：剪切圖片以適應對象尺寸。image ：默認值。增大或減小對象的尺寸邊界以適應圖片的尺寸。scale ：縮放圖片以適應對象的尺寸邊界。 src ：必選項。字符串(String) 。使用絕對或相對 url 地址指定背景圖像。假如忽略此參數，濾鏡將不會作用。 firefox 不能對 innerText 支持 firefox 支持innerHTML 但卻不支持innerText ，它支持textContent 來實現innerText ，不過默認把多余的空格也保留了。如果不用textContent ，如果字符串里面不包含HTML 代碼也可以用innerHTML 代替。 禁止選取網頁內容 在IE 中一般用js ：obj.onselectstart=function(){return false;} 而firefox 用CSS:-moz-user-select:none 濾鏡的支持 ( 例：透明濾鏡 ) IE:filter ：alpha(opacity=10); firefox ：-moz-opacity:.10; 捕獲事件 IE ：obj.setCapture() 、obj.releaseCapture() Firefox ：document.addEventListener(”mousemove”,mousemovefunction,true); document.removeEventListener(”mousemove”,mousemovefunction,true); 獲取鼠標位置 IE:event.clientX 、event.clientY firefox ：需要事件函數傳遞事件對象 obj.onmousemove=function(ev){ X= ev.pageX;Y=ev.pageY; } DIV 等元素的邊界問題 比如：設置一個div 的CSS: ：{width:100px;height:100px;border:#000000 1px solid;} IE 中：div 的寬度（包括邊框寬度）：100px ，div 的高度（包括邊框寬度）：100px ； 而firefox ：div 的寬度（包括邊框寬度）：102px ，div 的高度（包括邊框寬度）：102px ； 判斷瀏覽器類型 var isIE=document.all ? true : false; 我寫了一個變量，如果支持document.all 語法那么isIE=true ，否則isIE=false 在不同瀏覽器下的CSS 處理 一般可以用!important 來優先使用css 語句（僅firefox 支持） 比如：{border-width:0px!important;border-width:1px;} 在firefox 下這個元素是沒有邊框的，在IE 下邊框寬度是1px document.formName.item(”itemName”) 問題 問題說明：IE 下，可以 使用 document.formName.item(”itemName”) 或 document.formName.elements [”elementName”] ；Firefox 下，只能使用document.formName.elements[”elementName”] 。 解決方法：統一使用document.formName.elements[”elementName”] 。 集合類對象問題 問題說明：IE 下，可以使用() 或[] 獲取集合類對象；Firefox 下，只能使用[] 獲取集合類對象。 解決方法：統一使用 [] 獲取集合類對象。 自定義屬性問題 問題說明：IE 下，可以使用獲取常規屬性的方法來獲取自定義屬性，也可以使用 getAttribute() 獲取自定義屬性；Firefox 下，只能使用 getAttribute() 獲取自定義屬性。 解決方法：統一通過 getAttribute() 獲取自定義屬性。 eval(”idName”) 問題 問題說明：IE 下，可以使用 eval(”idName”) 或 getElementById(”idName”) 來取得 id 為 idName 的HTML 對象；Firefox 下，只能使用 getElementById(”idName”) 來取得 id 為 idName 的HTML 對象。 解決方法：統一用 getElementById(”idName”) 來取得 id 為 idName 的HTML 對象。 變量名與某HTML 對象ID 相同的問題 問題說明：IE 下，HTML 對象的ID 可以作為 document 的下屬對象變量名直接使用，Firefox 下則不能；Firefox 下，可以使用與HTML 對象ID 相同的變量名，IE 下則不能。 解決方法：使用 document.getElementById(”idName”) 代替 document.idName 。最好不要取HTML 對象ID 相同的變量名，以減少錯誤；在聲明變量時，一律加上var 關鍵字，以避免歧義。 const 問題 問題說明：Firefox 下，可以使用const 關鍵字或var 關鍵字來定義常量；IE 下，只能使用var 關鍵字來定義常量。 解決方法：統一使用var 關鍵字來定義常量。 input.type 屬性問題 問題說明：IE 下 input.type 屬性為只讀；但是Firefox 下 input.type 屬性為讀寫。 解決辦法：不修改 input.type 屬性。如果必須要修改，可以先隱藏原來的input ，然后在同樣的位置再插入一個新的input 元素。 window.event 問題 問題說明：window.event 只能在IE 下運行，而不能在Firefox 下運行，這是因為Firefox 的event 只能在事件發生的現場使用。 解決方法：在事件發生的函數上加上event 參數，在函數體內( 假設形參為evt) 使用 var myEvent = evt?evt:(window.event?window.event:null) 示例：<input type=”button” onclick=”doSomething(event)”/> <script language=”javascript”> function doSomething(evt) { var myEvent = evt ? evt: (window.event ? window.event : null) … } event.x 與event.y 問題 問題說明：IE 下，even 對象有x 、y 屬性，但是沒有pageX 、pageY 屬性；Firefox 下，even 對象有pageX 、pageY 屬性，但是沒有x 、y 屬性。 解決方法：var myX = event.x ? event.x : event.pageX;var myY = event.y ? event.y:event.pageY; 如果考慮第8 條問題，就改用myEvent 代替event 即可。 event.srcElement 問題 問題說明：IE 下，even 對象有srcElement 屬性，但是沒有target 屬性；Firefox 下，even 對象有target 屬性，但是沒有srcElement 屬性。 解決方法：使用srcObj = event.srcElement ? event.srcElement : event.target; 如果考慮第8 條問題，就改用myEvent 代替event 即可。 window.location.href 問題 問題說明：IE 或者Firefox2.0.x 下，可以使用window.location 或window.location.href ；Firefox1.5.x 下，只能使用window.location 。 解決方法：使用 window.location 來代替 window.location.href 。當然也可以考慮使用 location.replace() 方法。 模態和非模態窗口問題 問題說明：IE 下，可以通過showModalDialog 和showModelessDialog 打開模態和非模態窗口；Firefox 下則不能。 解決方法：直接使用 window.open(pageURL,name,parameters) 方式打開新窗口。 如 果需要將子窗口中的參數傳遞回父窗口，可以在子窗口中使用window.opener 來訪問父窗口。如果需要父窗口控制子窗口的話，使用var subWindow = window.open(pageURL,name,parameters); 來獲得新開的窗口對象。 frame 和iframe 問題 以下面的frame 為例： <frame src=”xxx.html” id=”frameId” name=”frameName” /> (1) 訪問frame 對象 IE ：使用window.frameId 或者window.frameName 來訪問這個frame 對象； Firefox ：使用window.frameName 來訪問這個frame 對象； 解決方法：統一使用 window.document.getElementById(”frameId”) 來訪問這個frame 對象； (2) 切換frame 內容 在IE 和Firefox 中都可以使用window.document.getElementById(”frameId”).src = “xxx.html” 或window.frameName.location = “xxx.html” 來切換frame 的內容； 如果需要將frame 中的參數傳回父窗口，可以在frame 中使用parent 關鍵字來訪問父窗口。 body 載入問題 問題說明：Firefox 的body 對象在body 標簽沒有被瀏覽器完全讀入之前就存在；而IE 的body 對象則必須在body 標簽被瀏覽器完全讀入之后才存在。 [ 注] 這個問題尚未實際驗證，待驗證后再來修改。 [ 注] 經驗證，IE6 、Opera9 以及FireFox2 中不存在上述問題，單純的JS 腳本可以訪問在腳本之前已經載入的所有對象和元素，即使這個元素還沒有載入完成。 事件委托方法 問題說明：IE 下，使用 document.body.onload = inject; 其中function inject() 在這之前已被實現；在Firefox 下，使用 document.body.onload = inject(); 解決方法：統一使用 document.body.onload=new Function(”inject()”); 或者 document.body.onload = function(){/* 這里是代碼 */} [ 注意] Function 和function 的區別 訪問的父元素的區別 問題說明：在IE 下，使用 obj.parentElement 或 obj.parentNode 訪問obj 的父結點；在firefox 下，使用 obj.parentNode 訪問obj 的父結點。 解決方法：因為firefox 與IE 都支持DOM ，因此統一使用obj.parentNode 來訪問obj 的父結點。 cursor:hand VS cursor:pointer 問題說明：firefox 不支持hand ，但ie 支持pointer ，兩者都是手形指示。 解決方法：統一使用pointer 。 innerText 的問題 問題說明：innerText 在IE 中能正常工作，但是innerText 在FireFox 中卻不行。 解決方法：在非IE 瀏覽器中使用textContent 代替innerText 。 示例： if(navigator.appName.indexOf(”Explorer”) >-1){ document.getElementById(”element”).innerText = “my text”; }else{ document.getElementById(”element”).textContent = “my text”; } [ 注] innerHTML 同時被ie 、firefox 等瀏覽器支持，其他的，如outerHTML 等只被ie 支持，最好不用。 對象寬高賦值問題 問題說明：FireFox 中類似 obj.style.height = imgObj.height 的語句無效。 解決方法：統一使用 obj.style.height = imgObj.height + “px”; Table 操作問題 問題說明：ie 、firefox 以及其它瀏覽器對于 table 標簽的操作都各不相同，在ie 中不允許對table 和tr 的innerHTML 賦值，使用js 增加一個tr 時，使用appendChild 方法也不管用。 解決方法： // 向table 追加一個空行： var row = otable.insertRow(-1); var cell = document.createElement(”td”); cell.innerHTML = “”; cell.className = “XXXX”; row.appendChild(cell); [ 注] 由于俺很少使用JS 直接操作表格，這個問題沒有遇見過。建議使用JS 框架集來操作table ，如JQuery 。 ul 和ol 列表縮進問題 消除ul 、ol 等列表的縮進時，樣式應寫成：list-style:none;margin:0px;padding:0px; 其中margin 屬性對IE 有效，padding 屬性對FireFox 有效。← 此句表述有誤，詳細見↓ [ 注] 這個問題尚未實際驗證，待驗證后再來修改。 [ 注] 經驗證，在IE 中，設置margin:0px 可以去除列表的上下左右縮進、空白以及列表編號或圓點，設置padding 對樣式沒有影響；在Firefox 中，設置margin:0px 僅僅可以去除上下的空白，設置padding:0px 后僅僅可以去掉左右縮進，還必須設置list-style:none 才 能去除列表編號或圓點。也就是說，在IE 中僅僅設置margin:0px 即可達到最終效果，而在Firefox 中必須同時設置margin:0px 、 padding:0px 以及list-style:none 三項才能達到最終效果。 CSS 透明問題 IE ：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60) 。 FF ：opacity:0.6 。 [ 注] 最好兩個都寫，并將opacity 屬性放在下面。 CSS 圓角問題 IE ：ie7 以下版本不支持圓角。 FF ：-moz-border- radius:4px ，或者-moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border- radius- bottomright:4px; 。 [ 注] 圓角問題是CSS 中的經典問題，建議使用JQuery 框架集來設置圓角，讓這些復雜的問題留給別人去想吧。 二、CSS 完美兼容IE6/IE7/FF 的通用方法 關于CSS 對各個瀏覽器兼容已經是老生常談的問題了, 網絡上的教程遍地都是. 以下內容沒有太多新穎, 純屬個人總結, 希望能對初學者有一定的幫助. 一、CSS HACK 以下兩種方法幾乎能解決現今所有HACK. 1, !important 隨著IE7 對!important 的支持, !important 方法現在只針對IE6 的HACK.( 注意寫法. 記得該聲明位置需要提前.) 2, IE6/IE77 對FireFox *+html 與 *html 是IE 特有的標簽, firefox 暫不支持. 而*+html 又為 IE7 特有標簽. 注意: *+html 對IE7 的HACK 必須保證HTML 頂部有如下聲明： 二、萬能 float 閉合 關于 clear float 的原理可參見 [How To Clear Floats Without Structural Markup] 將以下代碼加入Global CSS 中, 給需要閉合的div 加上 class=”clearfix” 即可, 屢試不爽. 三、其他兼容技巧 1, FF 下給 div 設置 padding 后會導致 width 和 height 增加, 但IE 不會.( 可用!important 解決) 2, 居中問題. 1). 垂直居中. 將 line-height 設置為當前 div 相同的高度, 再通過 vertical-align: middle.( 注意內容不要換行.) 2). 水平居中. margin: 0 auto;( 當然不是萬能) 3, 若需給 a 標簽內內容加上樣式, 需要設置 display: block;( 常見于導航標簽) 4, FF 和 IE 對 BOX 理解的差異導致相差 2px 的還有設為 float 的div 在ie 下 margin 加倍等問題. 5, ul 標簽在 FF 下面默認有 list-style 和 padding . 最好事先聲明, 以避免不必要的麻煩. ( 常見于導航標簽和內容列表) 6, 作為外部 wrapper 的 div 不要定死高度, 最好還加上 overflow: hidden. 以達到高度自適應. 7, 關于手形光標. cursor: pointer. 而hand 只適用于 IE. 1 針對firefox ie6 ie7 的css 樣式 現在大部分都是用!important 來hack ，對于ie6 和firefox 測試可以正常顯示， 但是ie7 對!important 可以正確解釋，會導致頁面沒按要求顯示！找到一個針 對IE7 不錯的hack 方式就是使用“*+html” ，現在用IE7 瀏覽一下，應該沒有問題了。 現在寫一個CSS 可以這樣： #1 { color: #333; } /* Moz */ * html #1 { color: #666; } /* IE6 */ *+html #1 { color: #999; } /* IE7 */ 那么在firefox 下字體顏色顯示為#333 ，IE6 下字體顏色顯示為#666 ，IE7 下字體顏色顯示為#999 。 2 css 布局中的居中問題 主要的樣式定義如下： body {TEXT-ALIGN: center;} #center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; } 說明： 首先在父級元素定義TEXT-ALIGN: center; 這個的意思就是在父級元素內的內容居中；對于IE 這樣設定就已經可以了。 但在mozilla 中不能居中。解決辦法就是在子元素定義時候設定時再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ” 需要說明的是，如果你想用這個方法使整個頁面要居中，建議不要套在一個DIV 里，你可以依次拆出多個div ， 只要在每個拆出的div 里定義MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。 3 盒模型不同解釋 #box{ width:600px; //for ie6.0- w/idth:500px; //for ff+ie6.0} #box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-} 4 浮動ie 產生的雙倍距離 #box{ float:left; width:100px; margin:0 0 0 100px; // 這種情況之下IE 會產生200px 的距離 display:inline; // 使浮動忽略} 這里細說一下block,inline 兩個元素,Block 元素的特點是: 總是在新行上開始, 高度, 寬度, 行高, 邊距都可以控制( 塊元素);Inline 元素的特點是: 和其他元素在同一行上,… 不可控制( 內嵌元素); #box{ display:block; // 可以為內嵌元素模擬為塊元素 display:inline; // 實現同一行排列的的效果 diplay:table; IE 不認得min- 這個定義，但實際上它把正常的width 和height 當作有min 的情況來使。這樣問題就大了，如果只用寬度和高度， 正常的瀏覽器里這兩個值就不會變，如果只用min-width 和min-height 的話，IE 下面根本等于沒有設置寬度和高度。 比如要設置背景圖片，這個寬度是比較重要的。要解決這個問題，可以這樣： #box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;} 6 頁面的最小寬度 min-width 是個非常方便的CSS 命令，它可以指定元素最小也不能小于某個寬度，這樣就能保證排版一直正確。但IE 不認得這個， 而它實際上把width 當做最小寬度來使。為了讓這一命令在IE 上也能用，可以把一個 放到標簽下，然后為div 指定一個類： 然后CSS 這樣設計： #container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );} 第一個min-width 是正常的；但第2 行的width 使用了Javascript ，這只有IE 才認得，這也會讓你的HTML 文檔不太正規。它實際上通過Javascript 的判斷來實現最小寬度。 7 清除浮動 .hackbox{ display:table; // 將對象作為塊元素級的表格顯示} 或者.hackbox{ clear:both;} 或者加入:after （偽對象）, 設置在對象后發生的內容，通常和content 配合使用，IE 不支持此偽對象，非Ie 瀏覽器支持， 所以并不影響到IE/WIN 瀏覽器。這種的最麻煩的......#box:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;} 8 DIV 浮動IE 文本產生3 象素的bug 左邊對象浮動，右邊采用外補丁的左邊距來定位，右邊對象內的文本會離左邊有3px 的間距. #box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; // 這句是關鍵} HTML 代碼 9 屬性選擇器( 這個不能算是兼容, 是隱藏css 的一個bug) p[id]{}div[id]{} 這個對于IE6.0 和IE6.0 以下的版本都隱藏,FF 和OPera 作用 屬性選擇器和子選擇器還是有區別的, 子選擇器的范圍從形式來說縮小了, 屬性選擇器的范圍比較大, 如p[id] 中, 所有p 標簽中有id 的都是同樣式的. 10 IE 捉迷藏的問題 當div 應用復雜的時候每個欄中又有一些鏈接，DIV 等這個時候容易發生捉迷藏的問題。 有些內容顯示不出來，當鼠標選擇這個區域是發現內容確實在頁面。 解決辦法：對#layout 使用line-height 屬性或者給#layout 使用固定高和寬。頁面結構盡量簡單。 11 高度不適應 高度不適應是當內層對象的高度發生變化時外層高度不能自動進行調節，特別是當內層對象使用 margin 或paddign 時。 例： p 對象中的內容 CSS ：#box {background-color:#eee; } #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; } 解決方法：在P 對象上下各加2 個空的div 對象CSS 代碼：.1{height:0px;overflow:hidden;} 或者為DIV 加上border 屬性。 六、CSS 兼容要點分析IE vs FF CSS 兼容要點： DOCTYPE 影響 CSS 處理 FF: div 設置 margin-left, margin-right 為 auto 時已經居中, IE 不行 FF: body 設置 text-align 時, div 需要設置 margin: auto( 主要是 margin-left,margin-right) 方可居中 FF: 設置 padding 后, div 會增加 height 和 width, 但 IE 不會, 故需要用 !important 多設一個 height 和 width FF: 支持 !important, IE 則忽略, 可用 !important 為 FF 特別設置樣式 div 的垂直居中問題: vertical-align:middle; 將行距增加到和整個DIV 一樣高 line-height:200px; 然后插入文字，就垂直居中了。缺點是要控制內容不要換行 cursor: pointer 可以同時在 IE FF 中顯示游標手指狀， hand 僅 IE 可以 FF: 鏈接加邊框和背景色，需設置 display: block, 同時設置 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設置高度是為了避免底邊顯示錯位, 若不設 height, 可以在 menubar 中插入一個空格XHTML+CSS 兼容性解決方案小集 使用XHTML ＋CSS 構架好處不少，但也確實存在一些問題，不論是因為使用不熟練還是思路不清晰，我就先把一些我遇到的問題寫在下面，省的大家四處找^^ 1 、在mozilla firefox 和IE 中的BOX 模型解釋不一致導致相差2px 解決方法： div{margin:30px!important;margin:28px;} 注意這兩個margin 的順序一定不能寫反，據阿捷的說法!important 這個屬性IE 不能識別，但別的瀏覽器可以識別。所以在IE 下其實解釋成這樣： div{maring:30px;margin:28px} 重復定義的話按照最后一個來執行，所以不可以只寫margin:XXpx!important; 2 、IE5 和IE6 的BOX 解釋不一致IE5 下div{width:300px;margin:0 10px 0 10px;}div 的寬度會被解釋為300px-10px( 右填充)-10px( 左填充) 最終div 的寬度為280px ，而在IE6 和其他瀏覽器上寬度則是以300px+10px( 右填充)+10px( 左填充)=320px 來計算的。這時我們可以做如下修改 div{width:300px!important;width /**/:340px;margin:0 10px 0 10px} ，關于這個/**/ 是什么我也不太明白，只知道IE5 和firefox 都支持但IE6 不支持，如果有人理解的話，請告訴我一聲，謝了！：） 3 、ul 標簽在Mozilla 中默認是有padding 值的, 而在IE 中只有margin 有值所以先定義 ul{margin:0;padding:0;} 就能解決大部分問題 4 、關于腳本，在xhtml1.1 中不支持language 屬性，只需要把代碼改為 < type="text/java"> 就可以了 七、10 個你未必知道的CSS 技巧 1 、CSS 字體屬性簡寫規則 一般用CSS 設定字體屬性是這樣做的： font-weight:bold; font-style:italic; font-varient:small-caps; font-size:1em; line-height:1.5em; font-family:verdana,sans-serif; 但也可以把它們全部寫到一行上去： font: bold italic small-caps 1em/1.5em verdana,sans-serif; 真不錯！只有一點要提醒的：這種簡寫方法只有在同時指定font-size 和font-family 屬性時才起作用。而且，如果你沒有設定font-weight, font-style, 以及 font-varient ，他們會使用缺省值，這點要記上。 2 、同時使用兩個類 一般只能給一個元素設定一個類（Class ），但這并不意味著不能用兩個。事實上，你可以這樣： … 同時給P 元素兩個類，中間用空格格開，這樣所有text 和side 兩個類的屬性都會加到P 元素上來。如果它們兩個類中的屬性有沖突的話，后設置的起作用，即在CSS 文件中放在后面的類的屬性起作用。 補充：對于一個ID ，不能這樣寫 … 也不能這樣寫 3 、CSS border 的缺省值 通常可以設定邊界的顏色，寬度和風格，如： border: 3px solid #000 這位把邊界顯示成3 像素寬，黑色，實線。但實際上這里只需要指定風格即可。 如果只指定了風格，其他屬性就會使用缺省值。一般地，Border 的寬度缺省是medium ，一般等于3 到4 個像素；缺省的顏色是其中文字的顏色。如果這個值正好合適的話，就不用設那么多了。 4 、CSS 用于文檔打印 許多網站上都有一個針對打印的版本，但實際上這并不需要，因為可以用CSS 來設定打印風格。 也就是說，可以為頁面指定兩個CSS 文件，一個用于屏幕顯示，一個用于打印： 第1 行就是顯示，第2 行是打印，注意其中的media 屬性。 但應該在打印 CSS 中寫什么東西呢？你可以按設計普通CSS 的方法來設定它。設計的同時就可以把這個CSS 設成顯示CSS 來檢查它的效果。也許你會使用 display: none 這個命令來關掉一些裝飾圖片，再關掉一些導航按鈕。要想了解更多，可以看“ 打印差異” 這一篇。 5 、圖片替換技巧 一般都建議用標準的HTML 來顯示文字，而不要使用圖片，這樣不但快，也更具可讀性。但如果你想用一些特殊字體時，就只能用圖片了。 比如你想整個賣東西的圖標，你就用了這個圖片： 這當然可以，但對搜索引擎來說，和正常文字相比，它們對alt 里面的替換文字幾乎沒有興趣這是因為許多設計者在這里放許多關鍵詞來騙搜索引擎。所以方法應該是這樣的： Buy widgets 但這樣就沒有特殊字體了。要想達到同樣效果，可以這樣設計CSS ： h1 { background: url(/blog/widget-image.gif) no-repeat; height: image height text-indent: -2000px } 注意把image height 換成真的圖片的高度。這里，圖片會當作背景顯示出來，而真正的文字由于設定了-2000 像素這個縮進，它們會出現在屏幕左邊2000 點的地方，就看不見了。但這對于關閉圖片的人來說，可能全部看不到了，這點要注意。 6 、CSS box 模型的另一種調整技巧 這個Box 模型的調整主要是針對IE6 之前的IE 瀏覽器的，它們把邊界寬度和空白都算在元素寬度上。比如： #box { width: 100px; border: 5px; padding: 20px } 這樣調用它： … 這時盒子的全寬應該是150 點，這在除IE6 之前的IE 瀏覽器之外的所有瀏覽器上都是正確的。但在IE5 這樣的瀏覽器上，它的全寬仍是100 點。可以用以前人發明的Box 調整方法來處理這種差異。 但用CSS 也可以達到同樣的目的，讓它們顯示效果一致。 #box { width: 150px } #box div { border: 5px; padding: 20px } 這樣調用： … 這樣，不管什么瀏覽器，寬度都是150 點了。 7 、塊元素居中對齊 如果想做個固定寬度的網頁并且想讓網頁水平居中的話，通常是這樣： #content { width: 700px; margin: 0 auto } 你會使用 來圍上所有元素。這很簡單，但不夠好，IE6 之前版本會顯示不出這種效果。改CSS 如下： body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto } 這會把網頁內容都居中，所以在Content 中又加入了 text-align: left 。 8 、用CSS 來處理垂直對齊 垂直對齊用表格可以很方便地實現，設定表格單元 vertical-align: middle 就可以了。但對CSS 來說這沒用。如果你想設定一個導航條是2em 高，而想讓導航文字垂直居中的話，設定這個屬性是沒用的。 CSS 方法是什么呢？對了，把這些文字的行高設為 2em ：line-height: 2em ，這就可以了。 9 、CSS 在容器內定位 CSS 的一個好處是可以把一個元素任意定位，在一個容器內也可以。比如對這個容器： #container { position: relative } 這樣容器內所有的元素都會相對定位，可以這樣用： … 如果想定位到距左30 點，距上5 點，可以這樣： #navigation { position: absolute; left: 30px; top: 5px } 當然，你還可以這樣： margin: 5px 0 0 30px 注意4 個數字的順序是：上、右、下、左。當然，有時候定位的方法而不是邊距的方法更好些。 10 、直通到屏幕底部的背景色 在垂直方向是進行控制是CSS 所不能的。如果你想讓導航欄和內容欄一樣直通到頁面底部，用表格是很方便的，但如果只用這樣的CSS ： #navigation { background: blue; width: 150px } 較短的導航條是不會直通到底部的，半路內容結束時它就結束了。該怎么辦呢？ 不幸的是，只能采用欺騙的手段了，給這較短的一欄加上個背景圖，寬度和欄寬一樣，并讓它的顏色和設定的背景色一樣。 body { background: url(/blog/blue-image.gif) 0 0 repeat-y } 此時不能用 em 做單位，因為那樣的話，一旦讀者改變了字體大小，這個花招就會露餡，只能使用 px 。