CSS常見(jiàn)問(wèn)題及解決方案.docVIP

作為前端開(kāi)發(fā)人員，在日常的頁(yè)面制作時(shí)，不可避免的會(huì)碰上這樣那樣的問(wèn)題，這時(shí)就需要尋找這些XHTML及CSS常見(jiàn)問(wèn)題的解決方案。我根據(jù)自己的經(jīng)驗(yàn)和心得挑選和整理了一些XHTML常見(jiàn)問(wèn)題和CSS常見(jiàn)問(wèn)題的解決方案進(jìn)行總結(jié)歸檔，希望對(duì)大家會(huì)有所幫助：1、如何定義高度很小的容器？在IE6下無(wú)法定義小高度的容器，是因?yàn)橛幸粋€(gè)默認(rèn)的行高。列舉2種解決方案：overflow:hidden | line-height:02、圖片下方出現(xiàn)幾像素的空白間隙？這個(gè)也有多種解決方案，如將img定義為display:block,或定義父容器為font-size:0，個(gè)人更推薦使用vertical-align的方式，它的值可以是text-top | text-bottom | middle等3、IE6雙倍margin的BUG?display:inline4、文本垂直方向?qū)R文本輸入框？設(shè)置input為vertical-align:middle，textarea也是如此5、為什么在web標(biāo)準(zhǔn)下ie無(wú)法設(shè)置滾動(dòng)條的顏色？將設(shè)置滾動(dòng)條顏色的樣式定義到html標(biāo)簽選擇符上即可6、如何讓層在falsh上顯示？不可以，除了少數(shù)幾個(gè)級(jí)別很高的家伙除外。但可以將flash設(shè)置為透明，這時(shí)層就會(huì)透過(guò)falsh顯示，近似于覆蓋在flash之上了，如：7、如何使得文字不換行？定義包含文字的容器為：width:xxx;white-space:nowrap;8、ie中如何讓超出寬度的文字顯示為省略號(hào)？定義容器為：overflow:hidden;width:xxx;white-space:nowrap;text-overflow:ellipsis;9、如何在點(diǎn)文字時(shí)也選中checkbox?測(cè)試10、一個(gè)div為margin-bottom:10px，一個(gè)div為margin-top:5px，為什么2個(gè)div之間的間距是10px而不是15px?這種情況瀏覽器會(huì)自動(dòng)進(jìn)行margin重疊，只顯示較大的margin值解決方案：只設(shè)置其中一個(gè)div的margin為15px11、如何解決ie下當(dāng)li中出現(xiàn)2個(gè)或以上的浮動(dòng)時(shí)，li之間產(chǎn)生的空白間隙？設(shè)置li的vertical-align，值可以為top | text-top | middle | bottom | text-bottom12、如何使得英文單詞不發(fā)生詞內(nèi)斷行？word-wrap:break-word;13、為什么被訪問(wèn)過(guò)的鏈接顏色沒(méi)有變化？定義鏈接的樣式時(shí)，需要按照:link,:visited,:hover,:active這樣的順序，可以使用LoVe HAte（喜歡討厭）來(lái)記憶14、單行文本如何垂直居中？height:xxx;line-height:xxx; 高和行高相同即可15、已知高度的容器如何在頁(yè)面中水平垂直居中？高固定情況下的水平及垂直居中 作者:飄零霧雨 日期:2007-07-30字體大小: 小 中 大哇，好久沒(méi)有Blog一下了，最近實(shí)在是忙暈了頭，當(dāng)然不僅僅是工作的問(wèn)題，還有其它的。今天終于是忙里偷閑，好不容易有點(diǎn)時(shí)間更新一下Blog了，卻被蜘蛛網(wǎng)似的雜亂無(wú)章的引用，留言，評(píng)論給搞得不爽，準(zhǔn)備等再有時(shí)間就把“引用”什么的功能去掉，太多垃圾引用了。發(fā)現(xiàn)好長(zhǎng)一段時(shí)間或者說(shuō)一直以來(lái)，很多同學(xué)都對(duì)居中這個(gè)話題十分感興趣，當(dāng)然這里既有水平居中也包括垂直居中。相信水平居中大家都已經(jīng)了解并會(huì)使用了，無(wú)非就text-align:center這樣，還有為了兼容不可或卻的margin:auto。某樣功能或效果的實(shí)現(xiàn)其實(shí)都是依據(jù)一定的原理基礎(chǔ)上的，有的東西只要明白了它的原理，至于有多少種實(shí)現(xiàn)方法和各方法的寫(xiě)法優(yōu)劣這都會(huì)因個(gè)人對(duì)原理的理解程度不一而有所不同。扯遠(yuǎn)了，還是回來(lái)聊所謂的垂直居中（要垂直居中的這個(gè)東東的高度是即定的）。如，要使得一個(gè)高150px，寬任意的東東在瀏覽器中垂直居中：演示地址：/model/xhtmlcss/style/cenmid.htmCSS部分：html,body margin:0;font:12px/180% 宋體;text-align:center;height:100%;#main width:300px;height:150px;background-color:#ddd;text-align:left;overflow:hidden;position:relative;top:50%;margin:-75px auto 0 auto;#main h3 margin:0;font:bold 18px/150% 宋體;XHTML部分：傳說(shuō)中的水平及垂直居中(高固定) 傳說(shuō)中的水平及垂直居中 傳說(shuō)中的水平及垂直居中 傳說(shuō)中的水平及垂直居中 傳說(shuō)中的水平及垂直居中 傳說(shuō)中的水平及垂直居中 傳說(shuō)中的水平及垂直居中 如上面這個(gè)例子，就已經(jīng)實(shí)現(xiàn)了高為150px的div垂直居中。XHTML部分沒(méi)有什么值得考究的，只需要看一下CSS部分就行了。首先我們知道要使得一個(gè)東東始終呆在瀏覽器的某個(gè)位置，這需要用到position，然后通過(guò)top,right,bottom,left來(lái)控制具體位置。要使得這個(gè)div垂直居中，OK，肯定會(huì)想到top:50%。這樣其實(shí)div的頂部就已經(jīng)是垂直居中了，但對(duì)于整個(gè)div來(lái)說(shuō)還并沒(méi)有垂直居中，所以它需要以頂部作為軸心向上移動(dòng)若干像素，移動(dòng)多少呢？廢話，當(dāng)然是這個(gè)div實(shí)際高度的一半：75px。這樣就能保證軸心上下的高是一樣的，也就是說(shuō)整個(gè)div就實(shí)現(xiàn)垂直居中了。然而為什么要指定html,bodyheight:100%呢？這和position:relative有什么聯(lián)系呢？自己去想，呵呵。16、未知尺寸的圖片圖如何水平垂直居中？CSS未知尺寸的圖片在容器中垂直居中的方法 作者:飄零霧雨 日期:2007-09-28字體大小: 小 中 大轉(zhuǎn)載請(qǐng)注明出處，css探索之旅-飄零霧雨的莊園最近，對(duì)于如何用純CSS實(shí)現(xiàn)未知尺寸的圖片在容器中水平垂直居中這個(gè)問(wèn)題，大家表現(xiàn)出關(guān)注度非常高。首先，我們不要去追究是否有這樣做的必要，因?yàn)橛械臅r(shí)候圖片是從數(shù)據(jù)庫(kù)讀取的，可能大小不一，這時(shí)候?yàn)榱瞬蛔寛D片大小不一而破壞了頁(yè)面的美觀性，其實(shí)就有必要這么做了?？偟膩?lái)說(shuō)，會(huì)有幾種方案可以用來(lái)做這件事。這里，我只寫(xiě)一種個(gè)人認(rèn)為較為簡(jiǎn)單和易于理解的方法。預(yù)覽地址：/model/xhtmlcss/style/vercen/1.htmlCSS部分：.outerdisplay:table;*display:inline;*position:relative;width:300px;height:300px;.outer pdisplay:table-cell;*position:absolute;*top:50%;*left:50%;vertical-align:middle;.outer p img*position:relative;*top:-50%;*left:-50%;vertical-align:middle;XHTML部分：Vertical Centering in CSSVertical Centering in CSS假設(shè)上面XHTML中的圖片1.gif和2.gif就是從數(shù)據(jù)庫(kù)讀取出來(lái)的（可以使用本地機(jī)器上現(xiàn)有的圖片測(cè)試），它們的尺寸規(guī)格不同。我們可以看到的效果為：它們都在容器outer里垂直居中了。其實(shí)對(duì)于支持display:table | table-cell的瀏覽器來(lái)說(shuō)，遠(yuǎn)不需要如此多的步驟就可以實(shí)現(xiàn)未知高度的圖片的垂直居中了。而CSS部分里的Hack都是為不支持這些屬性的IE準(zhǔn)備的。為了測(cè)試，可以將以上的Hack部分都注釋掉，然后看看效果。另一種實(shí)現(xiàn)方式：純CSS使用font-size實(shí)現(xiàn)未知尺寸圖片的垂直居中17、標(biāo)準(zhǔn)模式和怪異模式下的盒模型區(qū)別？標(biāo)準(zhǔn)模式下：實(shí)際寬度 = width + padding + border怪異模式下：實(shí)際寬度 = width - padding - border18、如何解決IE下的3像素BUG?避免和清除寬自適應(yīng)布局在ie中產(chǎn)生幾像素差異的方法 作者:飄零霧雨 日期:2007-07-24字體大小: 小 中 大 標(biāo)題想了半天也想不到一個(gè)好的，感覺(jué)怎么寫(xiě)怎么長(zhǎng)!- -怕是小學(xué)時(shí)縮句沒(méi)學(xué)好。 今天想說(shuō)的這個(gè)問(wèn)題應(yīng)該算是老調(diào)重談了，不過(guò)寫(xiě)出來(lái)希望會(huì)給大家一些幫助，也使我自己不會(huì)忘記，畢竟好記性比不上爛筆頭。 相信做過(guò)寬度自適應(yīng)布局的同學(xué)都碰到過(guò)在ie下莫名其妙的多出幾像素的問(wèn)題，我也覺(jué)得ie總是讓人不斷的折騰，可能是怕我們老坐在電腦前不“運(yùn)動(dòng)”會(huì)滋生出些什么亂七八糟的毛病來(lái)：） 先寫(xiě)個(gè)在不考慮ie情況下的寬自適應(yīng)的兩欄布局：關(guān)于自適應(yīng)寬度布局在IE中的幾像素異常html,body margin:0;#dyhead margin-bottom:5px;#dyhead,#dyfoot background:#999;#dyleft float:left;width:400px;height:100px;background: #666;#dyright height:100px;margin-left:400px;background: #ccc;#dyfoot clear:both;margin-top:5px;Head左固定右自適應(yīng)Foot 上面的例子在非IE的瀏覽器中已經(jīng)比較好的實(shí)現(xiàn)了寬自適應(yīng)的布局，但用在IE中，會(huì)發(fā)現(xiàn)左右兩欄之間多出了一個(gè)幾像素的間距。 這就是前面說(shuō)的幾像素問(wèn)題 一、如何避免： 首先應(yīng)該是去想如何避免出現(xiàn)這個(gè)問(wèn)題，其實(shí)很簡(jiǎn)單，只需要將右欄（也就是要自適應(yīng)寬度的那欄）的高度去掉，意思就是不要給自適應(yīng)寬的那欄設(shè)置高。 把上面的#dyright樣式改為：#dyright margin-left:400px;background: #ccc; 只需要把之前該樣式里面的height去掉，就可以避免了出現(xiàn)那幾像素差異的問(wèn)題。 搞定這個(gè)問(wèn)題后，再小玩一下，在不考慮右欄的寬要自適應(yīng)的情況下。之前因?yàn)樵O(shè)置了height會(huì)出現(xiàn)這個(gè)問(wèn)題，那么給#dyright加個(gè)width又會(huì)怎樣呢？任意給了一個(gè)width值后，發(fā)現(xiàn)那消失的幾個(gè)像素又回來(lái)了，于是估計(jì)IE中這幾像素的差異是不浮動(dòng)欄中的寬和高在作怪。 二、如何清除 一般情況下能避免這個(gè)問(wèn)題當(dāng)然是比較理想的，但也不否決會(huì)有特殊情況。 如果在不能去除自適應(yīng)寬度那欄的height情況下，IE中那幾像素差異就無(wú)法避免了，只能想別的方法來(lái)清除掉這個(gè)差異。 當(dāng)然，這也是非常簡(jiǎn)單的一個(gè)方法，只需小改一下就OK。修改如下：#dyleft float:left;width:400px;height:100px;background:#666;margin-right:0;_margin-right:-3px;#dyright height:100px;background:#ccc; 只需要給#dyleft加上一個(gè)margin-right負(fù)值就行了，開(kāi)始你可能不知道這幾像素差異具體是多少，但這幾像素在頁(yè)面上才那么點(diǎn)大，所以絕不會(huì)超過(guò)5px，這樣你就可以一個(gè)一個(gè)去試咯，直到正好合適為止。 至于為什么是負(fù)值而不是正值，應(yīng)該不用說(shuō)了吧。如果這里給margin-right一個(gè)正值的話，那就把右欄推得更遠(yuǎn)，而這個(gè)縫隙也就更大了。 還有就是為什么要加一個(gè)_margin-right:-3px;這個(gè)的樣式呢？因?yàn)樵诜荌E瀏覽器下不會(huì)出現(xiàn)這個(gè)異常，如果這時(shí)也margin-right:-3px的話，那么它們左欄的寬度將會(huì)減少3px，所以它們的期望值是不變，于是就通過(guò)這樣一個(gè)hack來(lái)繞過(guò)其它瀏覽器。 最后一點(diǎn)變化，就是將#dyright中的margin-left:400px去掉，因?yàn)檫@個(gè)也會(huì)給該欄的寬度帶來(lái)變化，而寬度正是引起這個(gè)差異的元兇之一，所以應(yīng)該去掉。 到這里，將#dyleft和#dyright樣式改成這樣之后，這個(gè)差異就被清除掉了，也十分的簡(jiǎn)單。以上的內(nèi)容中出現(xiàn)ie均為ie6。 不知道同學(xué)們有否更簡(jiǎn)單有效的方法，如有，請(qǐng)給我留言：）19、如何做1像素細(xì)邊框的table?方法1：設(shè)置table的border-collapse:collapse;tableborder-collapse:collapse;border-color:#000;tdborder-color:#000;測(cè)試測(cè)試方法2：關(guān)鍵在于設(shè)置cellspacine=1，用間隙來(lái)作為邊框tablebackground:#000;trbackground:#fff;測(cè)試測(cè)試20、以圖換字的幾種方法及優(yōu)劣分析以圖換字，其實(shí)是為了保證頁(yè)面的可讀性，這樣既有利于搜索引擎，又有利于結(jié)構(gòu)查看。由于這種方式被大多數(shù)人所認(rèn)同，所以方法也越來(lái)越多： 方法1：使用text-indent的負(fù)值，將內(nèi)容移出容器； 方法2：使用display:none，將內(nèi)容隱藏；方法3：使用padding將文字?jǐn)D出容器之外，并將超出的部分hidden; 方法4：使用font設(shè)置超小字體，達(dá)到隱藏內(nèi)容的目的。 方法1（非常不推薦）看起來(lái)蠻簡(jiǎn)單，但其實(shí)有幾個(gè)不理想的地方，1是比較吃資源；2是在ie5下面會(huì)出現(xiàn)滯后背景無(wú)法顯示；3是內(nèi)容為超鏈接時(shí)，長(zhǎng)長(zhǎng)的黑色虛框，讓你抓狂。 方法2（不推薦）其實(shí)倒也不復(fù)雜，只是需要多添加一個(gè)標(biāo)簽，比較浪費(fèi)；且display:none出現(xiàn)的幾率太多，對(duì)seo也是會(huì)有些許影響的。 方法3（推薦）Standard Model下要2層標(biāo)簽才能搞定，不過(guò)相對(duì)方法1和2還是有優(yōu)勢(shì)的，推薦一下。 方法4（強(qiáng)烈推薦）只需要將字體和行高設(shè)置為0，然后overflow:hidden就行;不過(guò)這樣在Safari和Chrome下還是會(huì)有1px高的字出現(xiàn)，所以應(yīng)該再設(shè)置一下字體的顏色和背景圖相同或相近。以此就同樣可以達(dá)到隱藏內(nèi)容的目的，暫時(shí)還沒(méi)發(fā)現(xiàn)有什么副作用，強(qiáng)烈推薦。21、如何容器透明，內(nèi)容不透明？假設(shè)在標(biāo)準(zhǔn)模式下有如下結(jié)構(gòu)： 我不要透明IE only的方法：在父容器outer被設(shè)置為透明后，只需要將子容器inner設(shè)置為position:relative; 如果需要兼容其它瀏覽器，則以上的方法不適用，且結(jié)構(gòu)也需改為： 我不要透明然后使用position + z-index搞定位置22、如何去掉鏈接的虛線框？IE下：FF下:aoutline:none;23、如何使得頁(yè)面字體行距始終保持n倍字體大小為基調(diào)？在body內(nèi)設(shè)置line-height:n即可，注，不可以為它加上單位原因可參閱：/article.asp?id=19524、如何使用標(biāo)準(zhǔn)的方法插入flash? 25、Standard Model如何讓容器可以height:100%？設(shè)置html,bodyheight:100%;margin:0;26、如何使得表格的寬度固定?設(shè)置table為table-layout:fixed;這時(shí)表格將使用固定布局算法，多出的內(nèi)容將不影響表格的寬度27、如何讓min-height兼容ie6?.min-heightmin-height:100px;_height:100px;我是兼容的min-height28、如何讓鼠標(biāo)變成手型且兼容所有現(xiàn)代瀏覽器？cursor:pointer29、如何實(shí)現(xiàn)ie6下的position:fixed?參閱：/articl