分享XHTML和CSS常見問題和解決方案

2020-03-24 17:02:01

字體：大中小

供稿：網(wǎng)友

作為前端開發(fā)人員，在日常的頁面制作時，不可避免的會碰上這樣那樣的問題，這時就需要尋找這些XHTML及CSS常見問題的解決方案。我根據(jù)自己的經(jīng)驗(yàn)和心得挑選和整理了一些XHTML常見問題和CSS常見問題的解決方案進(jìn)行總結(jié)歸檔，希望對大家會有所幫助：1、如何定義高度很小的容器？在IE6下無法定義小高度的容器，是因?yàn)橛幸粋€默認(rèn)的行高。
列舉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文本輸入框？設(shè)置input為vertical-align:middle，textarea也是如此5、為什么在web標(biāo)準(zhǔn)下ie無法設(shè)置滾動條的顏色？將設(shè)置滾動條顏色的樣式定義到html標(biāo)簽選擇符上即可6、如何讓層在falsh上顯示？不可以，除了少數(shù)幾個級別很高的家伙除外。
但可以將flash設(shè)置為透明，這時層就會透過falsh顯示，近似于覆蓋在flash之上了，如：
param name="mode" value="transparent" / 7、如何使得文字不換行？定義包含文字的容器為：width:xxx;white-space:nowrap;8、ie中如何讓超出寬度的文字顯示為省略號？定義容器為：overflow:hidden;width:xxx;white-space:nowrap;text-overflow:ellipsis;9、如何在點(diǎn)文字時也選中checkbox? input id="test" type="checkbox" value="on" / label for="test" 測試 /label 10、一個div為margin-bottom:10px，一個div為margin-top:5px，為什么2個div之間的間距是10px而不是15px?這種情況瀏覽器會自動進(jìn)行margin重疊，只顯示較大的margin值
解決方案：只設(shè)置其中一個div的margin為15px11、如何解決ie下當(dāng)li中出現(xiàn)2個或以上的浮動時，li之間產(chǎn)生的空白間隙？設(shè)置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、已知高度的容器如何在頁面中水平垂直居中？今天終于是忙里偷閑，好不容易有點(diǎn)時間更新一下Blog了，卻被蜘蛛網(wǎng)似的雜亂無章的引用，留言，評論給搞得不爽，準(zhǔn)備等再有時間就把“引用”什么的功能去掉，太多垃圾引用了。發(fā)現(xiàn)好長一段時間或者說一直以來，很多同學(xué)都對居中這個話題十分感興趣，當(dāng)然這里既有水平居中也包括垂直居中。相信水平居中大家都已經(jīng)了解并會使用了，無非就text-align:center這樣，還有為了兼容不可或卻的margin:auto。某樣功能或效果的實(shí)現(xiàn)其實(shí)都是依據(jù)一定的原理基礎(chǔ)上的，有的東西只要明白了它的原理，至于有多少種實(shí)現(xiàn)方法和各方法的寫法優(yōu)劣這都會因個人對原理的理解程度不一而有所不同。扯遠(yuǎn)了，還是回來聊所謂的垂直居中（要垂直居中的這個東東的高度是即定的）。16、未知尺寸的圖片圖如何水平垂直居中？參閱：http://www.missyuan.com/viewthread.php?tid=47083017、標(biāo)準(zhǔn)模式和怪異模式下的盒模型區(qū)別？標(biāo)準(zhǔn)模式下：實(shí)際寬度 = width + padding + border
怪異模式下：實(shí)際寬度 = width - padding - border18、如何解決IE下的3像素BUG?參閱：http://www.missyuan.com/viewthread.php?tid=47083219、如何做1像素細(xì)邊框的table?方法1：設(shè)置table的border-collapse:collapse;
style type="text/css"
table{border-collapse:collapse;border-color:#000;}
td{border-color:#000;}
/style
table cellspacing="0" cellpadding="0" border="1"
tr
td 測試 /td
td 測試 /td
/tr
/table 方法2：關(guān)鍵在于設(shè)置cellspacine="1"，用間隙來作為邊框
style type="text/css"
table{background:#000;}
tr{background:#fff;}
/style
table cellspacing="1" cellpadding="0" border="0"
tr
td 測試 /td
td 測試 /td
/tr
/table 20、以圖換字的幾種方法及優(yōu)劣分析以圖換字，其實(shí)是為了保證頁面的可讀性，這樣既有利于搜索引擎，又有利于結(jié)構(gòu)查看。由于這種方式被大多數(shù)人所認(rèn)同，所以方法也越來越多：方法1：使用text-indent的負(fù)值，將內(nèi)容移出容器；
方法2：使用display:none，將內(nèi)容隱藏；
方法3：使用padding將文字?jǐn)D出容器之外，并將超出的部分hidden;
方法4：使用font設(shè)置超小字體，達(dá)到隱藏內(nèi)容的目的。方法1（非常不推薦）看起來蠻簡單，但其實(shí)有幾個不理想的地方，1是比較吃資源；2是在ie5下面會出現(xiàn)滯后背景無法顯示；3是內(nèi)容為超鏈接時，長長的黑色虛框，讓你抓狂。
方法2（不推薦）其實(shí)倒也不復(fù)雜，只是需要多添加一個標(biāo)簽，比較浪費(fèi)；且display:none出現(xiàn)的幾率太多，對seo也是會有些許影響的。
方法3（推薦）Standard Model下要2層標(biāo)簽才能搞定，不過相對方法1和2還是有優(yōu)勢的，推薦一下。
方法4（強(qiáng)烈推薦）只需要將字體和行高設(shè)置為0，然后overflow:hidden就行;不過這樣在Safari和Chrome下還是會有1px高的字出現(xiàn)，所以應(yīng)該再設(shè)置一下字體的顏色和背景圖相同或相近。以此就同樣可以達(dá)到隱藏內(nèi)容的目的，暫時還沒發(fā)現(xiàn)有什么副作用，強(qiáng)烈推薦
21、如何容器透明，內(nèi)容不透明？假設(shè)在標(biāo)準(zhǔn)模式下有如下結(jié)構(gòu)：
div
p 我不要透明 /p
/div IE only的方法：在父容器outer被設(shè)置為透明后，只需要將子容器inner設(shè)置為position:relative; 如果需要兼容其它瀏覽器，則以上的方法不適用，且結(jié)構(gòu)也需改為： div /div
div 我不要透明 /div 然后使用position + z-index搞定位置22、如何去掉鏈接的虛線框？IE下： a href="#" onfocus="this.blur();"...
FF下:a{outline:none;}23、如何使得頁面字體行距始終保持n倍字體大小為基調(diào)？在body內(nèi)設(shè)置line-height:n即可，注，不可以為它加上單位
原因可參閱：http://blog.doyoe.com/article.asp?id=19524、如何使用標(biāo)準(zhǔn)的方法插入flash? div
object type="application/x-shockwave-flash" data="*.swf" width="*" height="*"
param name="movie" value="*.swf" /
img src="*.jpg" alt="用于不支持flash或屏蔽flash時顯示" /
/object
/div 25、Standard Model如何讓容器可以height:100%？設(shè)置html,body{height:100%;margin:0;}26、如何使得表格的寬度固定?設(shè)置table為table-layout:fixed;這時表格將使用固定布局算法，多出的內(nèi)容將不影響表格的寬度27、如何讓min-height兼容ie6?.min-height{min-height:100px;_height:100px;}
div 我是兼容的min-height /div 28、如何讓鼠標(biāo)變成手型且兼容所有現(xiàn)代瀏覽器？cursor:pointer29、如何實(shí)現(xiàn)ie6下的position:fixed?參閱：http://blog.doyoe.com/article.asp?id=18830、IE下如何對Standard Mode與Quirks Mode進(jìn)行切換？IE6以下的瀏覽器不用觸發(fā)，直接以Quirks Mode呈現(xiàn)頁面。IE6和IE7都可以觸發(fā)的（在XHTML 的DTD申明前加上HTML注釋）：
!--Let ie6 and ie7 into quirks mode--
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" IE6的觸發(fā)（在XHTML 的DTD申明前加上XML申明）：
?xml version="1.0" encoding="utf-8"?
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" 當(dāng)沒有使用DTD聲明或者使用HTML4以下（不包括HTML4）的DTD聲明時，基本所有的瀏覽器都是使用Quirks Mode呈現(xiàn)。31、如何給一個元素定義多個不同的css規(guī)則？ style type="text/css"
.a{color:#f00;}
.b{background:#eee;}
/style div 測試 /div 如上例，該元素同時擁有a和b定義的樣式規(guī)則。
多個規(guī)則之間使用空格分開，并且只有class能同時使用多個規(guī)則，id不可以32、如何區(qū)別display:none與visibility:hidden?相同的是display:none與visibility:hidden都可以用來隱藏某個元素；
不同的是display:none在隱藏元素的時候，將其占位空間也去掉；而visibility:hidden只是隱藏了內(nèi)容而已，其占位空間仍然保留。 33、如何解決按鈕在IE7及以下瀏覽器中隨著value增多兩邊留白也隨著增加的問題？通常情況下，如果value的長度是固定不變的，可以給按鈕設(shè)定一個固定的width，這是沒有問題的，但在大多數(shù)情況下，按鈕的value大多是可變的，所以給按鈕設(shè)定width是不夠理想的。
解決方法，給按鈕加上：#overflow:visible;padding:0 10px;其中overflow用于清除ie兩邊的留白，padding用于使得各瀏覽器的留白一致html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。

上一篇：用CSS的overflow控制圖像的顯示大小

下一篇：css中定位position的詳細(xì)介紹