CSS常見問題及解決方案.doc

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