很多時(shí)候，希望能夠在HTML中使用空格排版。但瀏覽器在解析HTML時(shí)，會(huì)把連續(xù)的空格解析成一個(gè)，所以我們會(huì)使用等這樣的占位符。下面由學(xué)習(xí)啦小編為大家整理的CSS瀏覽器的方法，希望大家喜歡!

　　CSS瀏覽器的方法

　　1、ont-family:'宋體';將Safari的默認(rèn)字體設(shè)置成“宋體”等中英文等寬的字體，就能解決。Windows版本的Safari字體設(shè)置，需要直接使用中文“宋體”這樣的名稱而不是“Simsun”(了解原因的兄弟請(qǐng)告訴我)。

　　但至此，我們的根本目標(biāo)沒(méi)有解決，就是能否避免使用這樣的占位符，而使用“原生”的空格。考慮針對(duì)空白的相應(yīng)CSS屬性，具體了解有關(guān)white-space的用法，接下來(lái)就比較好處理了。

　　總結(jié)下使用white-space實(shí)現(xiàn)等寬空格的條件，有兩個(gè)。需要設(shè)置對(duì)應(yīng)的屬性

　　white-space:pre;

　　然后設(shè)置等寬字符(包括等寬空格)即可。綜合起來(lái)，就是這樣

　　font-family:'宋體',Simsun;

　　white-space:pre;

　　由于使用了中文CSS名稱，所以在實(shí)際使用中需要考慮樣式的字符編碼問(wèn)題。同時(shí)，需要額外考慮的是，蘋(píng)果機(jī)是否有“宋體”(或者其他等寬的字體)，有蘋(píng)果機(jī)的兄弟請(qǐng)幫忙測(cè)試下。

　　--Split--

　　2、供的另外一個(gè)思路，就是使用em單位。1em簡(jiǎn)單的說(shuō)，就可以認(rèn)為是一個(gè)字符寬度;同理，.5em就是半個(gè)字符。那么，上面的情況就可以使用這樣寫(xiě)。

　　買(mǎi)寶貝：

　　我的淘寶：

　　社區(qū)：

　　對(duì)應(yīng)的CSS應(yīng)為

　　.half-word{width:.5em;}

　　.two-word{width:2em;}

　　經(jīng)測(cè)試通過(guò)。

　　--Split--

　　針對(duì)這上述的兩種不同方法，個(gè)人認(rèn)為應(yīng)當(dāng)按照實(shí)際情況考慮采用。比如第一種方法，雖然依賴具體的等寬字體，但沒(méi)有添加其他額外的結(jié)構(gòu)，對(duì)于以后的維護(hù)會(huì)更加的方便;第二種方法，則更多的考慮了實(shí)際的應(yīng)用情況(同時(shí)也不用依賴具體的等寬字體)，但是也添加了額外的結(jié)構(gòu)。

　　CSS瀏覽器清理浮動(dòng)的方法

　　/* 清理浮動(dòng) */

　　.clearfix:after {

　　visibility:hidden;

　　display:block;

　　font-size:0;

　　content:" ";

　　clear:both;

　　height:0;

　　}

　　.clearfix {

　　zoom:1;

　　}

　　其原理是，在「高級(jí)」瀏覽器中使用 :after 偽類(lèi)在浮動(dòng)塊后面加上一個(gè)非 display:none 的不可見(jiàn)塊狀內(nèi)容來(lái)，并給它設(shè)置 clear:both 來(lái)清理浮動(dòng)。在 ie6 和 7 中給浮動(dòng)塊添加 haslayout 來(lái)讓浮動(dòng)塊撐高并正常影響文檔流。

　　上面的代碼應(yīng)該是現(xiàn)在主流的清理浮動(dòng)方式?，F(xiàn)在支付寶就使用這樣的方式。而現(xiàn)在，Nicolas Gallagher 給出了一個(gè)更簡(jiǎn)潔的方案：

　　.cf:before, .cf:after {

　　content:"";

　　display:table;

　　}

　　.cf:after {

　　clear:both;

　　}

　　.cf {

　　zoom:1;

　　}

　　原理還是一樣的。使用 :after 偽類(lèi)來(lái)提供浮動(dòng)塊后的 clear:both。不同的是，隱藏這個(gè)空白使用的是 display: table。而不是設(shè)置 visibility:hidden;height:0;font-size:0; 這樣的 hack。

　　值得注意的是這里中的 :before 偽類(lèi)。其實(shí)他是來(lái)用處理 top-margin 邊折疊的，跟清理浮動(dòng)沒(méi)有多大的關(guān)系。但因?yàn)楦?dòng)會(huì)創(chuàng)建 block formatting context，這樣浮動(dòng)元素上的另而一元素上如果剛好有 margin-bottom 而這個(gè)浮動(dòng)元素剛好有margin-top 的話，應(yīng)該讓他們不折疊(雖然這種情況并不常見(jiàn))。

　　CSS網(wǎng)頁(yè)布局的方法

　　1、ul標(biāo)簽在Mozilla中默認(rèn)是有padding值的，而在IE中只有margin有值。

　　2、同一個(gè)的class選擇符可以在一個(gè)文檔中重復(fù)出現(xiàn)，而id選擇符卻只能出現(xiàn)一次;對(duì)一個(gè)標(biāo)簽同時(shí)使用class和id進(jìn)行CSS定義，如果定義有重復(fù)，id選擇符做的定義有效，是因?yàn)镮D的權(quán)值要比CLASS大。

　　3、一個(gè)兼容性調(diào)整(IE和Mozilla)的笨辦法：初學(xué)可能會(huì)碰到這樣一個(gè)情況：同樣一個(gè)標(biāo)簽的屬性在IE設(shè)置成A顯示是正常的，而在Mozilla里必須要設(shè)成B才能正常顯示，或者兩個(gè)倒過(guò)來(lái)。

　　臨時(shí)解決方法：選擇符{屬性名:B !important;屬性名:A}

　　4、如果一組要嵌套的標(biāo)簽之間需要些間距的話，那就留給位于里面的標(biāo)簽的margin屬性吧，而不要去定義位于外面的標(biāo)簽的padding

　　5、li標(biāo)簽前面的圖標(biāo)推薦使用background-image，而不是list-style-image。

　　6、IE分不清繼承關(guān)系和父子關(guān)系的差別，全部都是繼承關(guān)系。

　　7、在給你的標(biāo)簽瘋狂加選擇符的時(shí)候，別忘了在CSS里給選擇符加上注釋。 等你以后修改你的CSS的時(shí)候就知道為什么要這么做了。

　　8、如果你給一個(gè)標(biāo)簽設(shè)置了一個(gè)深色調(diào)的背景圖片和亮色調(diào)的文字效果。建議這個(gè)時(shí)候給你的標(biāo)簽再設(shè)置一個(gè)深色調(diào)的背景顏色。

　　9、定義鏈接的四種狀態(tài)要注意先后順序: Link Visited Hover Active

　　10、與內(nèi)容無(wú)關(guān)的圖片請(qǐng)使用background