測(cè)試管理工具M(jìn)ercuryQualityCenter9.0使用說明

1、測(cè)試管理工具M(jìn)ercury Quality Center 9.0使用說明編 制 人：薛占國(guó)編制日期：2012-02-20版 本 號(hào)：1.0概述Quality Center是Mercury Interactive 公司推出的一個(gè)基于 Web 且支持測(cè)試管理的所有必要方面的應(yīng)用程序。該軟件提供統(tǒng)一、可重復(fù)的流程，用于收集需求、計(jì)劃和安排測(cè)試、分析結(jié)果并管理缺陷和問題。組織可使用該軟件在較大的應(yīng)用程序生命周期中實(shí)現(xiàn)特定質(zhì)量流程和過程的數(shù)字化。該軟件還支持在 IT 團(tuán)隊(duì)間進(jìn)行高水平溝通和協(xié)調(diào)。QC的主要功能：1.Quality Center 有助于維護(hù)測(cè)試的項(xiàng)目數(shù)據(jù)庫，這個(gè)數(shù)據(jù)庫涵蓋了應(yīng)用程序功能的各

2、個(gè)方面。設(shè)計(jì)了項(xiàng)目中的每個(gè)測(cè)試，以滿足應(yīng)用程序的某個(gè)特定的測(cè)試需求。要達(dá)到項(xiàng)目的各個(gè)目標(biāo)，可將項(xiàng)目中的測(cè)試組織成各種特定的組。Quality Center 提供了一種直觀、高效的方法，用于計(jì)劃和執(zhí)行測(cè)試集、收集測(cè)試結(jié)果以及分析相關(guān)數(shù)據(jù)。Quality Center 還具有一套完善的系統(tǒng)，用于跟蹤應(yīng)用程序缺陷，通過它，您可以在從初期檢測(cè)到最后解決的整個(gè)過程中嚴(yán)密監(jiān)視缺陷。將 Quality Center 鏈接到電子郵件系統(tǒng)，所有應(yīng)用程序開發(fā)、質(zhì)量保證、客戶支持和信息系統(tǒng)人員可以共享缺陷跟蹤信息。2.Quality Center 可以集成 Mercury 測(cè)試工具（WinRunner、QuickT

3、est Professional、QuickTest Professional for MySAP.com Windows Client、LoadRunner 和 Visual API-XP）以及第三方和自定義測(cè)試工具、需求和配置管理工具。Quality Center 可以無縫地與您選擇的測(cè)試工具通信，提供一種完整的解決方案，使應(yīng)用程序測(cè)試完全自動(dòng)化。3.Quality Center 可指導(dǎo)您完成測(cè)試流程的需求指定、測(cè)試計(jì)劃、測(cè)試執(zhí)行和缺陷跟蹤階段。它把應(yīng)用程序測(cè)試中所涉及的全部任務(wù)集成起來，有助于確?？蛻裟軌虻玫阶罡哔|(zhì)量的應(yīng)用程序。登錄頁面Quality Center的登錄頁面和TD的有一些

4、區(qū)別，TD是登錄同時(shí)選域和項(xiàng)目，而QC是先進(jìn)行身份驗(yàn)證，再選擇域和項(xiàng)目，這樣不屬于該用戶的域和項(xiàng)目在身份驗(yàn)證后也不會(huì)顯示出來；避免了當(dāng)域和項(xiàng)目過多時(shí)，選擇的不便。自定義設(shè)置成功登錄Quality Center后選擇右上方的“工具”選項(xiàng)，選擇自定義（即TD登錄頁面中的Customer選項(xiàng)）；設(shè)置項(xiàng)目用戶和權(quán)限組選擇左側(cè)的“更改用戶的屬性”，對(duì)用戶進(jìn)行設(shè)置，QC用戶權(quán)限默認(rèn)的權(quán)限組有5個(gè)，分別是Viewer（對(duì)應(yīng)TD中的Guest）、QATester（測(cè)試人員）、Developer（開發(fā)人員）、Project Manager（項(xiàng)目經(jīng)理）和TDAdmin（超級(jí)管理員）。缺陷Defects簡(jiǎn)介Qual

5、ity Center將測(cè)試活動(dòng)大體分為四個(gè)階段，在頁面左端點(diǎn)擊“缺陷”進(jìn)入頁面，在此頁面顯示所有提交的缺陷（即Bug）信息，如下圖所示：缺陷的添加在缺陷頁面點(diǎn)擊【新建缺陷】按鈕打開缺陷添加窗口，如下圖：在填寫了必填項(xiàng)后（紅色部分）點(diǎn)擊提交按鈕，完成缺陷信息的添加，缺陷信息填寫規(guī)范如下：操作步驟：缺陷出現(xiàn)所需要進(jìn)行的操作錯(cuò)誤描述：對(duì)缺陷的描述BUG版本：缺陷產(chǎn)生的軟件版本缺陷的瀏覽和篩選使用鼠標(biāo)雙擊缺陷記錄，可以打開缺陷瀏覽窗口，該窗口共包括詳細(xì)信息、描述、附件和歷史記錄四大項(xiàng)；其中比較重要的是描述窗口，測(cè)試人員會(huì)在描述窗口中對(duì)缺陷出現(xiàn)前的操作步驟、缺陷的錯(cuò)誤描述以及缺陷的版本信息等進(jìn)行描述；在

6、下側(cè)的注釋窗口需要缺陷的修改人員對(duì)該條缺陷產(chǎn)生的原因進(jìn)行描述，以便在測(cè)試活動(dòng)結(jié)束后，測(cè)試處進(jìn)行缺陷分析；注釋窗口還可以用于開發(fā)人員和測(cè)試人員進(jìn)行交流和對(duì)該缺陷進(jìn)行說明等的文字描述；如該缺陷有截圖或者錄像文件，該文件會(huì)作為附件上傳，開發(fā)人員可以直接雙擊查看該附件文件；QC MSExcel AddinQCMSExcelAddin是Quality Center提供的一款插件，可以從Excel中以一定格式編寫需求、用例和缺陷，并最終導(dǎo)入QC中。打開Excel在加載項(xiàng)中找到Export To Quality Center，點(diǎn)擊后會(huì)彈出Quality Center Export向?qū)?，如下圖所填寫QC的地址

7、后點(diǎn)擊【Next】按鈕進(jìn)入下一步輸入用戶名和密碼選擇需要導(dǎo)入的域和項(xiàng)目選擇導(dǎo)入內(nèi)容的類型（是需求、用例還是缺陷）從上到下分別是選擇已有、新建和新建臨時(shí)字段對(duì)應(yīng)方式；講Excel的列號(hào)和QC的字段名一一對(duì)應(yīng)好（紅色的為必填項(xiàng)）完成后點(diǎn)擊【Finish】完成導(dǎo)入，可以到QC中查看導(dǎo)入結(jié)果提示：導(dǎo)入前必須將要導(dǎo)入的內(nèi)容在Excel中選中，并保持選中狀態(tài)。缺陷圖表和文檔生成Quality Center除了對(duì)需求、用例和缺陷進(jìn)行有效的記錄和管理外，還可以將發(fā)現(xiàn)的缺陷數(shù)據(jù)進(jìn)行分析并聲稱圖表，將需求、用例和缺陷整理導(dǎo)出，并生成文檔；缺陷分析在Defects頁面選擇菜單中的分析-Graph可以將已經(jīng)提交的缺陷

8、，根據(jù)狀態(tài)、嚴(yán)重級(jí)別等不同缺陷信息生成柱狀圖和餅圖以便進(jìn)行缺陷分析，如下圖：在左側(cè)的Graphs樹下還有各種不同的圖表缺陷進(jìn)度圖缺陷生命周期圖缺陷趨勢(shì)圖文檔生成在菜單中點(diǎn)擊工具文檔生成器彈出如下窗口：左側(cè)可以選擇文檔包含的內(nèi)容，右側(cè)可以分別設(shè)置文檔的其他信息，包括文檔標(biāo)題、作者、描述，在選項(xiàng)頁面中還可以設(shè)置文檔是否包含目錄、索引、附件、圖片等，在徽標(biāo)中可以添加logo圖片；完成后點(diǎn)擊整個(gè)文檔按鈕完成文檔導(dǎo)出；提示：導(dǎo)出文檔時(shí)必須關(guān)閉Word，QC也會(huì)提示用戶要進(jìn)行導(dǎo)出必須關(guān)閉正在運(yùn)行的Word程序Working flow附錄資料：web前端面試題1. W3C標(biāo)準(zhǔn)有哪些？W3C推行的主要規(guī)范有H

9、TML，CSS，XML，XHTML和DOM（Document Object Model）。2. 談?wù)凧s的內(nèi)存泄露問題。3. 談?wù)剬?duì)Html 5的了解。4. 談?wù)剬?duì)CSS 3的了解。5. 用js實(shí)現(xiàn)隨即選取10-100之間的10個(gè)數(shù)字，存入一個(gè)數(shù)組，并排序。var iArray = ;funtion getRandom(istart, iend) var iChoice = istart - iend +1; return Math.floor(Math.random() * iChoice + istart;for(var i=0; i10; i+) iArray.push(getRando

10、m(10,100);iArray.sort();6. 把兩個(gè)數(shù)組合并，并刪除第二個(gè)元素。var array1 = a,b,c;var bArray = d,e,f;var cArray = array1.concat(bArray);cArray.splice(1,1);7. Js面向?qū)ο蟮膸追N方式。8. 請(qǐng)談?wù)勗头绞綐?gòu)造對(duì)象的特點(diǎn)。9. 在Css中那個(gè)屬性會(huì)影響dom讀取文檔流的順序。答： float屬性。10. 請(qǐng)介紹幾種用div實(shí)現(xiàn)兩列布局的方案（兼容），另外要考慮文檔流的加載。11. 談?wù)刢ss在瀏覽器中的兼容問題，詳細(xì)談?wù)処E6的一些bug,以及解決方案。12. 談?wù)勀銓?duì)閉包的理解

11、。以及如何實(shí)現(xiàn)js方法的重寫。HTML & CSS1.Doctype? 嚴(yán)格模式與混雜模式-如何觸發(fā)這兩種模式，區(qū)分它們有何意義? 首先我講講如何觸發(fā)兩種模式： 加入xml頭部聲明可以觸發(fā)IE瀏覽器的Quirks mode，觸發(fā)之后，瀏覽器解析方式就和IE5.5一樣，擁有IE5.5一樣的bug和其他問題，行為（Javascript）也是如此。 IE6的觸發(fā) 在XHTML的DOCTYPE前加入XML聲明 IE7的觸發(fā) 在XML聲明和XHTML的DOCTYPE之間加入HTML注釋 IE6和IE7都可以觸發(fā)的 在HTML4.01的DOCTYPE文檔頭部加入HTML注釋 其次是這樣的意義 各個(gè)瀏覽器的

12、混雜模式，基本就是各個(gè)瀏覽器的私有模式，不相互兼容。所以，除非是為了兼容的問題，比如你不想修改很久很久以前做的IE ONLY的網(wǎng)頁，否則刻意觸發(fā)混雜模式?jīng)]有任何意義。2：行內(nèi)元素有哪些？塊級(jí)元素有哪些？CSS的盒模型？一.行內(nèi)元素和塊級(jí)元素有哪些？塊級(jí)元素information on authorlong quotationpush buttontable captiondefinition descriptiondeleted textgeneric language/style containerdefinition listdefinition termform control grou

13、pinteractive formheadingheadingheadingheadingheadingheadinghorizontal ruleinline subwindowinserted textfieldset legendlist itemclient-side image mapalternate content container for non frame-based renderingalternate content container for non script-based renderinggeneric embedded objectordered listpa

14、ragraphpreformatted texttabletable bodytable data celltable footertable header celltable headertable rowunordered list行內(nèi)元素anchorabbreviated formacronymbold text styleI18N BiDi over-ridelarge text styleforced line breakpush buttoncitationcomputer code fragmentdeleted textinstance definitionemphasisit

15、alic text styleinline subwindowEmbedded imageform controlinserted texttext to be entered by the userform field label textclient-side image mapgeneric embedded objectshort inline quotationsample program output, scripts, etc.option selectorsmall text stylegeneric language/style containerstrong emphasi

16、ssubscriptsuperscriptmulti-line text fieldteletype or monospaced text styleinstance of a variable or program argument二.行內(nèi)元素與塊級(jí)元素有什么不同？1.尺寸-塊級(jí)元素和行內(nèi)元素之間的一個(gè)重要的不同點(diǎn)行內(nèi)元素和widthW3C CSS2 標(biāo)準(zhǔn)規(guī)定行內(nèi)元素、非置換元素不會(huì)應(yīng)用width屬性。以下例子中，對(duì)行內(nèi)元素應(yīng)用了width:200px,你可以看到，根本就沒有什么效果。行內(nèi)元素和heightW3C CSS2 標(biāo)準(zhǔn)規(guī)定行內(nèi)元素、非置換元素不會(huì)應(yīng)用height屬性，但是盒子高度可

17、以通過line-height來指定。以下例子，對(duì)行內(nèi)元素應(yīng)用了height:50px,你可以看到什么效果都沒。行內(nèi)元素和padding你可以給行內(nèi)元素設(shè)置padding，但只有padding-left和padding-right生效。以下例子，行內(nèi)元素應(yīng)用了padding:50px。你可以看到對(duì)左右的內(nèi)容有影響，但是對(duì)上下沒影響。行內(nèi)元素和margingmargin屬性也是和padding屬性一樣，對(duì)行內(nèi)元素左右有效，上下無效。下面的例子,對(duì)應(yīng)用了margin:50px，你可以看到左右邊緣是生效了但是內(nèi)容上下卻沒有。記住對(duì)行內(nèi)元素設(shè)置寬度width 無效。設(shè)置高度height 無效，可以通過l

18、ine-height來設(shè)置。設(shè)置margin 只有左右margin有效，上下無效。設(shè)置padding 只有左右padding有效，上下則無效。注意元素范圍是增大了，但是對(duì)元素周圍的內(nèi)容是沒影響的，看圖上效果就知道了 盒子模型W3C 組織建議把所有網(wǎng)頁上的對(duì)像都放在一個(gè)盒(box)中，設(shè)計(jì)師可以通過創(chuàng)建定義來控制這個(gè)盒的屬性，這些對(duì)像包括段落、列表、標(biāo)題、圖片以及層。盒模型主 要定義四個(gè)區(qū)域：內(nèi)容(content)、邊框距(padding)、邊界(border)和邊距(margin)。對(duì)于初學(xué)者，經(jīng)常會(huì)搞不清楚 margin，background-color，background- image，

19、padding，content，border之間的層次、關(guān)系和相互影響。這里提供一張盒模型的3D示意圖，希望便于你的理解和記憶。每個(gè)HTML元素都可以看作一個(gè)裝了東西的盒子，盒子里面的內(nèi)容到盒子的邊框之間的距離即填充（padding），盒子本身有邊框（border），而盒子邊框外和其他盒子之間，還有邊界（margin）。盒模型的實(shí)際寬度關(guān)于盒模型，還有以下幾點(diǎn)需要注意：對(duì)于塊級(jí)元素（display:block），未浮動(dòng)的垂直相鄰元素的上邊界和下邊界會(huì)被壓縮，例如：有上下2個(gè)元素，上元素的下邊界為5px，下面元素的上邊界為20px，則實(shí)際2個(gè)元素的間距為20px（2個(gè)邊界值中較大的值）。如圖所示

20、。注1. 塊級(jí)元素（display： block）每個(gè)塊級(jí)元素都從一個(gè)新行開始，而且其后的元素也需另起一行開始，標(biāo)題、段落、表格、層、body等都是塊級(jí)元素。塊級(jí)元素只能作為其他塊級(jí)元素的子元素，而且需要一定的條件。內(nèi)聯(lián)元素，例如、等，定義上下邊界不會(huì)影響到行高（line-height），內(nèi)聯(lián)元素距離上一行元素的距離由行高決定，而不是填充或邊界。注2. 內(nèi)聯(lián)元素（display：inline）內(nèi)聯(lián)元素不需要在新行內(nèi)顯示，而且也不強(qiáng)迫其后的元素?fù)Q行，如a、em、span等都為內(nèi)聯(lián)元素。內(nèi)聯(lián)元素可以為任何其他元素的子元素。浮動(dòng)元素（無論左或者右浮動(dòng)）邊界不壓縮，且若浮動(dòng)元素不聲明寬度，則其寬度趨向

21、于0，即壓縮到其內(nèi)容能承受的最小寬度。如果盒中沒有內(nèi)容，則即使定義了寬度和高度都為100%，實(shí)際上只占0%，因此不會(huì)被顯示，此點(diǎn)在采取層布局的時(shí)候需特別注意。邊界值可為負(fù)，其顯示效果各瀏覽器可能不相同。填充值不可為負(fù)。邊框默認(rèn)的樣式（border-style）為不顯示（none）。3.CSS引入的方式有哪些? link和import的區(qū)別是?本質(zhì)上，這兩種方式都是為了加載CSS文件，但還是存在著細(xì)微的差別。差別1：老祖宗的差別。link屬于XHTML標(biāo)簽，而import完全是CSS提供的一種方式。 HYPERLINK /xhtml/tag_link/ link標(biāo)簽除了可以加載CSS外，還可以做

22、很多其它的事情，比如定義RSS，定義 HYPERLINK /xhtml/attribute_rel/ rel連接屬性等，import就只能加載CSS了。差別2：加載順序的差別。當(dāng)一個(gè)頁面被加載的時(shí)候（就是被瀏覽者瀏覽的時(shí)候），link引用的CSS會(huì)同時(shí)被加載，而import引用的CSS會(huì)等到頁面全部被下載完再被加載。所以有時(shí)候?yàn)g覽import加載CSS的頁面時(shí)開始會(huì)沒有樣式（就是閃爍），網(wǎng)速慢的時(shí)候還挺明顯（夢(mèng)之都加載CSS的方式就是使用import，我一邊下載一邊瀏覽夢(mèng)之都網(wǎng)頁時(shí)，就會(huì)出現(xiàn)上述問題）。差別3：兼容性的差別。由于 HYPERLINK /TR/CSS21/cascade.html

23、 l at-imp%3Cwbr%3Eort import是CSS2.1提出的所以老的瀏覽器不支持，import只有在IE5以上的才能識(shí)別，而link標(biāo)簽無此問題。差別4：使用dom控制樣式時(shí)的差別。當(dāng)使用javascript控制dom去改變樣式的時(shí)候，只能使用link標(biāo)簽，因?yàn)閕mport不是dom可以控制的。大致就這幾種差別了（如果還有什么差別，大家告訴我，我再補(bǔ)充上去），其它的都一樣，從上面的分析來看，還是使用link標(biāo)簽比較好。標(biāo)準(zhǔn)網(wǎng)頁制作加載CSS文件時(shí)，還應(yīng)該選定要加載的媒體（media），比如screen，print，或者全部all等。這個(gè)我到CSS高級(jí)教程中再給大家介紹。注：1，

24、網(wǎng)友comehope在留言中提出了另一種區(qū)別。差別5：import可以在css中再次引入其他樣式表，比如可以創(chuàng)建一個(gè)主樣式表，在主樣式表中再引入其他的樣式表，如：main.css-import “sub1.css”;import “sub2.css”;sub1.css-p color:red;sub2.css-.myclass color:blue這樣更利于修改和擴(kuò)展猴 子提示：這樣做有一個(gè)缺點(diǎn)，會(huì)對(duì)網(wǎng)站服務(wù)器產(chǎn)生過多的HTTP請(qǐng)求，以前是一個(gè)文件，而現(xiàn)在卻是兩個(gè)或更多文件了，服務(wù)器的壓力增大，瀏覽量大的網(wǎng)站還是 謹(jǐn)慎使用。有興趣的可以觀察一下像新浪等網(wǎng)站的首頁或欄目首頁代碼，他們總會(huì)把css

25、或js直接寫在html里，而不用外部文件。4.CSS選擇符有哪些？哪些屬性可以繼承？?jī)?yōu)先級(jí)算法如何計(jì)算？?jī)?nèi)聯(lián)和important哪個(gè)優(yōu)先級(jí)高？5:前端頁面有哪三層構(gòu)成，分別是什么？作用是什么？最準(zhǔn)確的網(wǎng)頁設(shè)計(jì)思路是把網(wǎng)頁分成三個(gè)層次，即：結(jié)構(gòu)層、表示層、行為層。網(wǎng)頁的結(jié)構(gòu)層（structural layer）由 HTML 或 XHTML 之類的標(biāo)記語言負(fù)責(zé)創(chuàng)建。標(biāo)簽，也就是那些出現(xiàn)在尖括號(hào)里的單詞，對(duì)網(wǎng)頁內(nèi)容的語義含義做出了描述，但這些標(biāo)簽不包含任何關(guān)于如何顯示有關(guān)內(nèi)容的信息。例如，P 標(biāo)簽表達(dá)了這樣一種語義：“這是一個(gè)文本段?！本W(wǎng)頁的表示層（presentation layer） 由 CSS

26、 負(fù)責(zé)創(chuàng)建。 CSS 對(duì)“如何顯示有關(guān)內(nèi)容”的問題做出了回答。網(wǎng)頁的行為層（behavior layer）負(fù)責(zé)回答“內(nèi)容應(yīng)該如何對(duì)事件做出反應(yīng)”這一問題。這是 Javascript 語言和 DOM 主宰的領(lǐng)域。8：你做的頁面在哪些流覽器測(cè)試過？這些瀏覽器的內(nèi)核分別是什么?經(jīng)常遇到的瀏覽器的兼容性有哪些？怎么會(huì)出現(xiàn)？解決方法是什么？點(diǎn)評(píng)：css的兼容性也是大家關(guān)注的熱點(diǎn)。大家一定要注意多測(cè)試。Javascript 多瀏覽器兼容性問題及解決方案兼容性處理要點(diǎn) 1、DOCTYPE 影響 CSS 處理 2、FF: 設(shè)置 padding 后， div 會(huì)增加 height 和 width， 但 IE 不

27、會(huì)， 故需要用 !important 多設(shè)一個(gè) height 和 width 3、FF: 支持 !important， IE 則忽略， 可用 !important 為 FF 特別設(shè)置樣式 4、div 的垂直居中問題: vertical-align:middle; 將行距增加到和整個(gè)DIV一樣高 line-height:200px; 然后插入文字，就垂直居中了。缺點(diǎn)是要控制內(nèi)容不要換行 5、在mozilla firefox和IE中的BOX模型解釋不一致導(dǎo)致相差2px解決方法： divmargin:30px!important;margin:28px; 注意這兩個(gè)margin的順序一定不能寫反，!

28、important這個(gè)屬性IE不能識(shí)別，但別的瀏覽器可以識(shí)別。所以在IE下其實(shí)解釋成這樣： divmaring:30px;margin:28px 重復(fù)定義的話按照最后一個(gè)來執(zhí)行，所以不可以只寫margin:XXpx!important; 瀏覽器差異 1、ul和ol列表縮進(jìn)問題 消除ul、ol等列表的縮進(jìn)時(shí)，樣式應(yīng)寫成：list-style:none;margin:0px;padding:0px; 其中margin屬性對(duì)IE有效，padding屬性對(duì)FireFox有效。 注 經(jīng)驗(yàn)證，在IE中，設(shè)置margin:0px可以去除列表的上下左右縮進(jìn)、空白以及列表編號(hào)或圓點(diǎn)，設(shè)置padding對(duì)樣式?jīng)]有

29、影響；在 Firefox 中，設(shè)置margin:0px僅僅可以去除上下的空白，設(shè)置padding:0px后僅僅可以去掉左右縮進(jìn)，還必須設(shè)置list- style:none才 能去除列表編號(hào)或圓點(diǎn)。也就是說，在IE中僅僅設(shè)置margin:0px即可達(dá)到最終效果，而在Firefox中必須同時(shí)設(shè)置margin:0px、 padding:0px以及l(fā)ist-style:none三項(xiàng)才能達(dá)到最終效果。 2、CSS透明問題 IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。 FF：opacity:0.6。 注 最好兩

30、個(gè)都寫，并將opacity屬性放在下面。 3、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中的經(jīng)典問題，建議使用JQuery框架集來設(shè)置圓角，讓這些復(fù)雜的問題留給別人去想吧。不過jQuery的圓角只看到支持整個(gè)區(qū)域的圓角，沒有支持邊框的圓

31、角，不過這個(gè)邊框的圓角可以通過一些簡(jiǎn)單的手段來實(shí)現(xiàn)，下次有機(jī)會(huì)介紹下。 4、cursor:hand VS cursor:pointer 問題說明：firefox不支持hand，但ie支持pointer ，兩者都是手形指示。 解決方法：統(tǒng)一使用pointer。 5、字體大小定義不同 對(duì)字體大小small的定義不同，F(xiàn)irefox中為13px，而IE中為16px，差別挺大。 解決方法：使用指定的字體大小如14px。 并列排列的多個(gè)元素（圖片或者鏈接）的div和div之間，代碼中的空格和回車在firefox中都會(huì)被忽略，而IE中卻默認(rèn)顯示為空格（約3px）。 6、CSS雙線凹凸邊框 IE：borde

32、r:2px outset;。 FF： -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080; 瀏覽器bug 1、IE的雙邊距bug 設(shè)置為float的div在ie下設(shè)置的margin會(huì)加倍。這是一個(gè)ie6都存在的bug。 解決方案：在這個(gè)div里面加上display:inline; 例如： 相應(yīng)的css為 以下為引用的內(nèi)容： 復(fù)制代

33、碼代碼如下:#IamFloat float:left; margin:5px;/*IE下理解為10px*/ display:inline;/*IE下再理解為5px*/ #IamFloat float:left; margin:5px;/*IE下理解為10px*/ display:inline;/*IE下再理解為5px*/ 關(guān) 于CSS中的問題實(shí)在太多了，甚至同樣的CSS定義在不同的頁面標(biāo)準(zhǔn)中的顯示效果都是不一樣的。一個(gè)合乎發(fā)展的建議是，頁面采用標(biāo)準(zhǔn)XHTML標(biāo)準(zhǔn)編寫， 較少使用table，CSS定義盡量依照標(biāo)準(zhǔn)DOM，同時(shí)兼顧IE、Firefox、Opera等主流瀏覽器。很多情況下，F(xiàn)F和 O

34、pera的CSS解釋標(biāo)準(zhǔn)更貼近CSS標(biāo)準(zhǔn)，也更具有規(guī)范性。 2、IE選擇符空格BUG 今天在給博客的段落樣式設(shè)置首字符樣式的時(shí)候發(fā)現(xiàn)，原來一個(gè)空格也可以使樣式失效。 請(qǐng)看以下代碼： 復(fù)制代碼代碼如下: 對(duì)于世界而言，你是一個(gè)人；但是對(duì)于某個(gè)人，你是他的整個(gè)世界?？v然傷心，也不要愁眉不展，因?yàn)槟悴恢钦l會(huì)愛上你的笑容。 /code 復(fù)制代碼代碼如下: 對(duì)于世界而言，你是一個(gè)人；但是對(duì)于某個(gè)人，你是他的整個(gè)世界?？v然傷心，也不要愁眉不展，因?yàn)槟悴恢钦l會(huì)愛上你的笑容。 這 段代碼對(duì)的首字符樣式定義在IE6上看是沒有效果的（IE7沒測(cè)試），而在p:first-letter和font- size:30

35、0%加上空格，也就是p:first-letter font-size:300%后，顯示就正常了。但是同樣的代碼，在FireFox下看是正常的。按道理說，p:first- letterfont-size:300%的寫法是沒錯(cuò)的。那么問題出在哪里呢？答案是偽類中的連字符”-”。IE有個(gè)BUG，在處理偽類時(shí)，如果偽 類的名稱中帶有連字符”-”，偽類名稱后面就得跟一個(gè)空格，不然樣式的定義就無效。而在FF中，加不加空格都可以正常處理。對(duì)css縮寫的支持問題：不論是ie 還是ff對(duì)css的縮寫都有一小點(diǎn)問題比如border: 0 xp solid #fff;兩個(gè)瀏覽器支持都沒有問題但對(duì)于四個(gè)邊的magin

36、不同情況下，就不能用這種縮寫了，無論是ie還是ff又會(huì)出現(xiàn)邊界解釋錯(cuò)誤，而導(dǎo)致頁面變形正確縮寫：border-width:0px 1px 2px 3px;border-style:solid;border-color:#fff;第二點(diǎn)是ie對(duì)于css的magin padding 等默認(rèn)值為0px，但ff卻不一樣，為了保持外觀的統(tǒng)一性，即使padding為0你也要寫上，以免ff在瀏覽中的錯(cuò)位。IE與Firefox的CSS兼容大全1.DOCTYPE 影響 CSS 處理2.FF: div 設(shè)置 margin-left, margin-right 為 auto 時(shí)已經(jīng)居中, IE 不行3.FF: bo

37、dy 設(shè)置 text-align 時(shí), div 需要設(shè)置 margin: auto(主要是 margin-left,margin-right) 方可居中4.FF: 設(shè)置 padding 后, div 會(huì)增加 height 和 width, 但 IE 不會(huì), 故需要用 !important 多設(shè)一個(gè) height 和 width5.FF: 支持 !important, IE 則忽略, 可用 !important 為 FF 特別設(shè)置樣式，值得注意的是，一定要將xxxx !important 這句放置在另一句之上6.div 的垂直居中問題: vertical-align:middle;將行距增加到和

38、整個(gè)DIV一樣高 line-height:200px; 然后插入文字，就垂直居中了。缺點(diǎn)是要控制內(nèi)容不要換行7.cursor: pointer 可以同時(shí)在 IE FF 中顯示游標(biāo)手指狀， hand 僅 IE 可以8.FF: 鏈接加邊框和背景色，需設(shè)置 display: block, 同時(shí)設(shè)置 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設(shè)置高度是為了避免底邊顯示錯(cuò)位, 若不設(shè) height, 可以在 menubar 中插入一個(gè)空格。9.在mozilla firefox和IE中的BOX模型解釋不一致導(dǎo)致相差2px解決方法：divmargin:30px!

39、important;margin:28px;注意這兩個(gè)margin的順序一定不能寫反，據(jù)阿捷的說法!important這個(gè)屬性IE不能識(shí)別，但別的瀏覽器可以識(shí)別。所以在IE下其實(shí)解釋成這樣：divmaring:30px;margin:28px重復(fù)定義的話按照最后一個(gè)來執(zhí)行，所以不可以只寫margin:XXpx!important;10.IE5 和IE6的BOX解釋不一致IE5下divwidth:300px;margin:0 10px 0 10px;div 的寬度會(huì)被解釋為300px-10px(右填充)-10px(左填充)最終div的寬度為280px，而在IE6和其他瀏覽器上寬度則是以 300p

40、x+10px(右填充)+10px(左填充)=320px來計(jì)算的。這時(shí)我們可以做如下修改divwidth:300px!important;width :340px;margin:0 10px 0 10px關(guān)于這個(gè)是什么我也不太明白，只知道IE5和firefox都支持但I(xiàn)E6不支持，如果有人理解的話，請(qǐng)告訴我一聲，謝了?。海?1.ul標(biāo)簽在Mozilla中默認(rèn)是有padding值的,而在IE中只有margin有值所以先定義ulmargin:0;padding:0;就能解決大部分問題注意事項(xiàng)：1、float的div一定要閉合。例如：(其中floatA、floatB的屬性已經(jīng)設(shè)置為float:left

41、;)這里的NOTfloatC并不希望繼續(xù)平移，而是希望往下排。這段代碼在IE中毫無問題，問題出在FF。原因是NOTfloatC并非float標(biāo)簽，必須將float標(biāo)簽閉合。在之間加上這個(gè)div一定要注意聲明位置，一定要放在最恰當(dāng)?shù)牡胤?，而且必須與兩個(gè)具有float屬性的div同級(jí)，之間不能存在嵌套關(guān)系，否則會(huì)產(chǎn)生異常。并且將clear這種樣式定義為為如下即可：.clearclear:both;此外，為了讓高度能自動(dòng)適應(yīng)，要在wrapper里面加上overflow:hidden;9.如何居中一個(gè)浮動(dòng)元素?設(shè)置容器的浮動(dòng)方式為相對(duì)定位然后確定容器的寬高 比如寬500 高 300 的層然后設(shè)置層的外

42、邊距DivWidth:500px ;height:300px; Margin: -150px 0 0 -250px;position: absolute;left:50%;top:50%;10.有沒有關(guān)注HTML5和CSS3?如有請(qǐng)簡(jiǎn)單說一些您對(duì)它們的了解情況！在HTML 5平臺(tái)上，視頻，音頻，圖象，動(dòng)畫，以及同電腦的交互都被標(biāo)準(zhǔn)化。那么我們來看一下HTML5的技術(shù)概覽有哪些： HTML5新增和移除的元素HTML5新增了很多多媒體和交互性元素如video, audio，在HTML4當(dāng)中如果要嵌入一個(gè)視頻或是音頻的話需要引入一大段的代碼，還有兼容各個(gè)瀏覽器，而HTML5只需要通過引入一個(gè)標(biāo)簽就可

43、以，就像img標(biāo)簽一樣方便。HTML5對(duì)表單的支持HTML5 提供了強(qiáng)大的控件類型如url, email, date, tel等，強(qiáng)大的約束屬性，如required表示必填，文件上傳的accept屬性，以及一些表單重復(fù)元素模型的支持，HTML5在提交表單的時(shí)候還可 以設(shè)置提交的方式為XML提交方式，這樣服務(wù)器端接收到的數(shù)據(jù)將是XML格式，HTML5的表單被定義為“Web Forms 2.0”，目前opera9.5+對(duì)Web Forms 2.0的支持較為完美。HTML5 DOM變化HTML5的Javascript APIsHTML5在Javascript上面新增了哪些API呢？Video/Aud

44、io: HTML5為Video和Audio提供了API來讓開發(fā)者控制他們自己的用戶界面，如可以播放或暫停媒體內(nèi)容。CSS3CSS3對(duì)于我們Web開發(fā)者來說不只是新奇的技術(shù)，更重要的是這些全新概念的web應(yīng)用給我們帶來更多無限的可能性，也極大地提高了我們的開發(fā)效率。我們將不必再依賴圖片或者Javascript 去完成圓角、多背景、用戶自定義字體、3D動(dòng)畫、漸變、盒陰影、文字陰影、透明度等提高Web設(shè)計(jì)質(zhì)量的特色應(yīng)用。CSS3對(duì)于動(dòng)畫的支持CSS3 支持的動(dòng)畫類型有：transform(變換)、transition(過渡)和animation(動(dòng)畫)。你可以對(duì)特定的屬性設(shè)置 transition，

45、transiton和animation的區(qū)別不大，animation的動(dòng)畫是自己定義的，面向的更多的是腳本開發(fā)者，往往更加 復(fù)雜。11.你怎么來實(shí)現(xiàn)下面這個(gè)設(shè)計(jì)圖,主要講述思路 （效果圖省略）13:如果讓你來制作一個(gè)訪問量很高的大型網(wǎng)站，你會(huì)如何來管理所有CSS文件、JS與圖片？14：你對(duì)前端界面工程師這個(gè)職位是怎么樣理解的？它的前景會(huì)怎么樣？Javascript1：js是什么，js和html 的開發(fā)如何結(jié)合？2.怎樣添加、移除、移動(dòng)、復(fù)制、創(chuàng)建和查找節(jié)點(diǎn)3.怎樣使用事件以及IE和DOM事件模型之間存在哪些主要差別4.面向?qū)ο缶幊?b怎么繼承a5.看看下面alert的結(jié)果是什么view sou

46、rceprint?1.function b(x, y, a) .arguments2 = 10; .alert(a); b(1, 2, 3);如果函數(shù)體改成下面，結(jié)果又會(huì)是什么？a = 10; alert(arguments2 );6.請(qǐng)編寫一個(gè)JavaScript函數(shù) parseQueryString，它的用途是把URL參數(shù)解析為一個(gè)對(duì)象var obj = parseQueryString(url); alert(obj.key0)/ 輸出07.ajax是什么?ajax的交互模型? 同步和異步的區(qū)別? 如何解決跨域問題?ajax(動(dòng)態(tài)網(wǎng)站靜態(tài)化)伴隨的goole 的推動(dòng)，越來越多的站點(diǎn)開始使

47、用了，在開大ajax(動(dòng)態(tài)網(wǎng)站靜態(tài)化)程序的時(shí)候會(huì)遇到很多的問題，主要有以下幾個(gè)方面： 1.跨瀏覽器問題 2.歷史后退狀態(tài)問題 3.跨域問題 跨瀏覽器的問題因?yàn)楝F(xiàn)在有很多的開元的框架已經(jīng)解決了，我們無需為此而煩惱。 歷史后退狀態(tài)問題我們可以使用一個(gè)數(shù)組來保存歷史紀(jì)錄，然后把這些數(shù)據(jù)村到歷史對(duì)象中去，中的也可以解決，并且還有很多的開元框架給與支持，這樣問題就不是很大。 跨域的問題就不是很好的解決，但是還是有辦法的，一下給出一些基本的解決方案供大家選擇： 1.使用代理，你可以使用web端的程序編寫代理程序，把所有的ajax(動(dòng)態(tài)網(wǎng)站靜態(tài)化)請(qǐng)求的數(shù)據(jù)進(jìn)行轉(zhuǎn)發(fā)，web程序可以使php(做為現(xiàn)在的主流

48、 開發(fā)語言)，jsp(SUN企業(yè)級(jí)應(yīng)用的首選)，asp等所有的編程語言。相信大家對(duì)這種方式一定很熟悉，這里就不詳細(xì)的介紹了。 2.使用iframe的方式來定勢(shì)的刷新葉面，這種方式只是取得數(shù)據(jù)來顯示，并不能真正的和求得的數(shù)據(jù)進(jìn)行交互，轉(zhuǎn)化成本頁面的動(dòng)態(tài)數(shù)據(jù)，不是很可取，應(yīng)用也不是很多，我也忽略不去討論了。 3.使用apache(Unix平臺(tái)最流行的WEB服務(wù)器平臺(tái))的代理功能，主要就是apache(Unix平臺(tái)最流行的WEB服務(wù)器平臺(tái))的方向代理， 或者是url從定向，你也可以把其他的站點(diǎn)直接的掛在自己的網(wǎng)站上，這樣的方式可能會(huì)友邦權(quán)的問題，多的九部介紹了，有興趣的本有可以自己實(shí)踐以下。 4.使

49、用script標(biāo)簽的方式，這樣的話就可以保正使用真正的ajax(動(dòng)態(tài)網(wǎng)站靜態(tài)化)來跨域，并且可以使用返回來的數(shù)據(jù)，發(fā)誓很簡(jiǎn)單，在我們的后臺(tái)程序處理后的到的結(jié)果都直接的用javascript 的方式返回，在我們的html中直接的使用返回?cái)?shù)據(jù)的變量就可以了一個(gè)簡(jiǎn)單的例子 8.什么是閉包？下面這個(gè)ul，如何點(diǎn)擊每一列的時(shí)候alert其index? 這是第一條這是第二條這是第三條 9.最近看的一篇Javas cript的文章是？10.常使用的庫有哪些？常用的前端開發(fā)工具？開發(fā)過什么應(yīng)用或組件？pageSpeed .Yslow,Fiddler、fireBug11.說說YSlow(可以詳細(xì)一點(diǎn)) 這個(gè)插件

50、可以分析網(wǎng)站的頁面，并告訴你為了提高網(wǎng)站性能，如何基于某些規(guī)則而進(jìn)行優(yōu)化。網(wǎng)頁制作方向的題目1.什么是網(wǎng)站重構(gòu)？div+css的布局較table布局有什么優(yōu)點(diǎn)？2.如何理解css盒模型？3.平時(shí)做網(wǎng)頁經(jīng)常使用哪些hack?4.如何理解表現(xiàn)與內(nèi)容相分離？5.如何解決ie6的雙邊距問題？6. 如何定義高度為1px的容器？heigh：1px; width:10px; background:#000; overflow:hiddenie6下這個(gè)問題是默認(rèn)行高造成的，overflow:hidden|zoom:0.08|line- height:1px這樣也可以解決7.如何實(shí)現(xiàn)一個(gè)層在瀏覽器中垂直左右居中

51、？margin：auto8.如何解決ie6的3像素問題？_zoom:1;margin-left: value; _margin-left: value-3px;9.為什么FF下文本無法撐開容器的高度?如何解決？ 清楚浮動(dòng)10. 怎么樣才能讓層顯示在FLASH之上呢?解決的辦法是給FLASH設(shè)置透明屬性或者1、 答：把未采用CSS，大量使用HTML進(jìn)行定位、布局，或者雖然已經(jīng)采用CSS，但是未遵循HTML結(jié)構(gòu)化標(biāo)準(zhǔn)的站點(diǎn)變成讓標(biāo)記回歸標(biāo)記的原本意 義。通過在HTML文檔中使用結(jié)構(gòu)化的標(biāo)記以及用CSS控制頁面表現(xiàn)，使頁面的實(shí)際內(nèi)容與它們呈現(xiàn)的格式相分離的站點(diǎn)。的過程就是網(wǎng)站重構(gòu)網(wǎng)站為什么要進(jìn)行重構(gòu)

52、（網(wǎng)站重構(gòu)的好處）a、使頁面加載得更快速；b、降低帶寬帶來的費(fèi)用：節(jié)約成本；c、讓你在修改設(shè)計(jì)時(shí)更有效率而代價(jià)更低；d、幫助你的整個(gè)站點(diǎn)保持視覺的一致性；e、更利于搜索引擎的檢索（符合SEO的規(guī)范）；f、令站點(diǎn)更容易被各種瀏覽器和用戶訪問（包括手機(jī)、PDA和殘障人士使用的文字瀏覽器）；g、兼容不容忽視的Mozilla系瀏覽器（Firefox份額）；h、提高你的職場(chǎng)競(jìng)爭(zhēng)實(shí)力(事實(shí)上也就是降低失業(yè)的風(fēng)險(xiǎn))。div+css的布局較table布局有什么優(yōu)點(diǎn):1、改版的時(shí)候更方便 只要改css文件。2、頁面加載速度更快、結(jié)構(gòu)化清晰、頁面顯示簡(jiǎn)潔。3、表現(xiàn)與結(jié)構(gòu)相分離。4、易于優(yōu)化（seo）搜索引擎更友好

53、，排名更容易靠前。答：2.如何理解css盒模型 ： 每個(gè)HTML元素都是長(zhǎng)方形盒子 外邊局(margin)、內(nèi)邊距(padding)、邊框(border);答：3.平時(shí)做網(wǎng)頁用的css hackIe6 * _;ie7 *, *+,!important;ff !important.答：4.表現(xiàn)與結(jié)構(gòu)相分離簡(jiǎn)單的說就是HTML中只有標(biāo)簽元素表現(xiàn)完全是由CSS文件控制的答：5.解決ie6雙邊距問題塊級(jí)元素就加display：inline；行內(nèi)元素轉(zhuǎn)塊級(jí)元素display：inline后面再加display：table6.如何定義高度為1px的容器？heigh：1px; width:10px; background:#000; overflow:hiddenie6下這個(gè)問題是默認(rèn)行高造成的，overflow:hidden|zoom:0.08|line-height:1px這樣也可以解決7.如何實(shí)現(xiàn)一個(gè)層在 瀏覽器中垂直左右居中？margin：auto8.如何解決ie6的3像素 問題？_zoom:1; margin-left: value; _margin-left: value-3px;9.為什么FF下文本無法撐開容器的高度?如何解決？清除浮動(dòng) .clear clear:both; height:0p