整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
日服務(wù)器被wallet病毒侵害了，水猿忙的可是不可開交。今日就附上水猿平常寫HTML頁面都會用的一段兼容性css代碼。保證在各瀏覽器中都可以保持一致。
body,div,ul,li,a,ol,dl,dt,dd,p,h1,h2,h3,h4,h5,h6,form,input,span,label,b{margin:0;padding:0}
li{list-style:none}
a{text-decoration:none}
img,input{border:none}
a,input{outline:none}
textarea{resize:none}
h1,h2,h3,h4,h5{font-style: normal}
i,em{font-style: normal}
.clearfix:after{content: "";display: block;height: 0;clear: both}
、基本的css兼容：
1、可能很多人喜歡用css hack的形式去兼容ie瀏覽器，但是我自己用起來感覺其實不好使 。ie7-就不考慮了，問題在哪呢，就在ie8的甑別上，你怎么讓樣式只對ie8起作用。上網(wǎng)搜你可能會得到這樣的答案：
.selector { color: #ff0>.selector { color: #ff0\0;/*ie8*/ color: #f00\9\0;/*ie9+*/}<;/*ie8*/ color: #f00>.selector { color: #ff0\0;/*ie8*/ color: #f00\9\0;/*ie9+*/}<;/*ie9+*/}
但是實際上你一試就嗝屁了，因為ie8他就是識別ie9能識別的，所以根本不能讓獨立的樣式只對ie8起作用。
（這個hack是可以區(qū)分ie8和ie9的，之前由于未知原因?qū)е聻g覽器測試不成功，重裝系統(tǒng)后發(fā)現(xiàn)是可用的，后來又在多臺機(jī)器上測試過，證明是正確的。很抱歉誤導(dǎo)了大家，特此修正，仍然建議用文檔注釋的方式去獨立寫hack，當(dāng)然最好是可以優(yōu)雅降級，避免使用css hack。）
更好用的是什么呢，是用ie瀏覽器獨有的文檔注釋的方式。像這樣：
<!DOCTYPE html><!--[if IE 8 ]> <html class="ie8" lang="en"> <![endif]--><!--[if IE 9 ]> <html class="ie9" lang="en"> <![endif]--><!--[if (gt IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
屢試不爽，關(guān)鍵是可以獨立的維護(hù)處理兼容ie瀏覽器的樣式表，又不會淹沒在一大堆css hack標(biāo)識中，只需要在獨立對ie8應(yīng)用樣式規(guī)則的地方，copy該條規(guī)則，然后在前面加上 .ie8然后就能隨便寫了，對付ie9也一樣。
2、對于360雙核這種找抽瀏覽器，據(jù)說添加以下頭部meta信息可以使得網(wǎng)頁用webkit內(nèi)核渲染：
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
IE=edge：保持使用最高級別模式顯示內(nèi)容；
chrome=1：谷歌的外掛插件Google Chrome Frame（谷歌內(nèi)嵌瀏覽器框架GCF），使用IE瀏覽網(wǎng)頁時實際上是使用Chrome瀏覽器內(nèi)核渲染，最低支持IE6，但前提是客戶端已經(jīng)安裝GCF。
但實際上這個meta標(biāo)識是ie瀏覽器所識別的（詳情：)，并不是公認(rèn)的標(biāo)準(zhǔn)，所以用雙核的瀏覽器會傲嬌。當(dāng)然360也會傲嬌，所以有時你會發(fā)現(xiàn)360并不能總是（也可能是我本人rp差）以chrome內(nèi)核渲染你的按現(xiàn)代標(biāo)準(zhǔn)開發(fā)的網(wǎng)頁。
那么試試這個吧，添加：<meta name="renderer" content="webkit">
這個meta標(biāo)識是360自家實現(xiàn)的(詳情：)，表示強(qiáng)制要求360這造福中國社會萬千網(wǎng)民的瀏覽器用chrome的內(nèi)核渲染網(wǎng)頁。
ok，一行代碼搞定360絕大部分的兼容。
二、ie8的css兼容
現(xiàn)在說說ie8下的css問題：
1、ie8支持:first-child,但不支持:last-child。因為前者是css2.1標(biāo)準(zhǔn)，后者是css3標(biāo)準(zhǔn)。參下：
CSS 2.1 selectors：Basic CSS selectors including: * (universal selector), > (child selector), :first-child, :link, :visited, :active, :hover, :focus, :lang(), + (adjacent sibling selector), [attr], [attr="val"], [attr~="val"], [attr|="bar"], .foo (class selector), #foo (id selector)
2、 為什么會發(fā)現(xiàn)上面的奇怪的東西（怪我css2.1和css3分不清），因為編譯sass文件后發(fā)現(xiàn)ie8下的樣式基本全歇菜了。需要注意的是，如果瀏覽器 不支持的選擇器和支持的選擇器寫在一起，那么整條規(guī)則就不起作用了。比如你不小心創(chuàng)造了一個偽元素（是真的偽哦）.bb:bb-child, .cc{background:#333;}那么這整條規(guī)則就不起作用了，所有瀏覽器在此情況下都會歇菜,.cc的樣式就丟失了。
3、 input設(shè)置了左右padding，but輸入較多內(nèi)容時padding還是會消失。這個問題是無解的，ie瀏覽器她就是這么渲染input的，解決方法是在input 外面套一層div，用div設(shè)置左右padding，border，width和height，input只需要設(shè)置width和weight為100% 即可。另外，正常來講，如果沒有明確設(shè)置height的值，那么設(shè)置的line-height值就是height的值，but對于ie8，如果input 設(shè)置了 line-height，那么input必須設(shè)置height，否則input的內(nèi)容顯示有問題，會上下隱藏部分內(nèi)容，她就是要躲貓貓。
4、 為什么上面我不用input的偽元素進(jìn)行設(shè)置而要嵌套多一層div呢？因為input，img，iframe等元素不支持偽元素 -_-||。:before 和:after偽元素指定了一個元素文檔樹內(nèi)容之前和之后的內(nèi)容。與'content'屬性聯(lián)用,指定了插入的內(nèi)容（也就是你必須顯性設(shè)置content 屬性這兩個偽家伙才能在文檔中顯示出來，哪怕設(shè)置content屬性為空字符串也行）。作為DOM元素，偽元素都是在容器內(nèi)進(jìn)行渲染的, input，img，iframe等元素都不能包含其他元素，也就是不是容器，所以不能通過偽元素插入內(nèi)容。
5、 table中如果不是嚴(yán)格的用于表格，而是用于奇葩的局部布局時（我也想問為什么用來布局。。），td設(shè)置成inline-block可以排成一行，但是 ie8和ie9 下，如果td中的內(nèi)容很長，即使td設(shè)置了寬度，td也會撐開并占用td設(shè)置的margin（廢話，td是沒有margin可言的），直到擠占所有的td 寬度之和為tr的寬度。但是td設(shè)置成float：left；就能表現(xiàn)成block。這個不清楚為什么，但是管用。。
6、父元素的左padding會和子元素的左margin重疊。這個是沒有好好實現(xiàn)盒子模型的事情了，包容吧。。
7、sprite圖中的icons之間最好留空白間隔，哪怕間隔1px也好，否則ie8下會出現(xiàn)使用了某一個icon當(dāng)背景，icon后面跟著的其他icon也順帶顯示了一小部分的bug，所以icons之間還是要適當(dāng)留白，不要太省。
三、ie11部分css問題
1、ie11下很多元素表現(xiàn)和其他瀏覽器不一致，比如對應(yīng)用了同一樣式（不設(shè)置 高度）的div，其他瀏覽器解析的高度是一致的，但是ie11下該div有可能高度偏大，由此導(dǎo)致一些排版上的問題，所以，如果發(fā)現(xiàn)元素排版上下偏移的問題，查看此元素或其當(dāng)代元素是否設(shè)置了高度，統(tǒng)一添上高度一切都o(jì)k了。
2、抱歉，ie11問題確實不多。
四、結(jié)尾附上一個關(guān)于css優(yōu)先級的奇談
首先我們知道：
1、id選擇器優(yōu)先級權(quán)重比class選擇器大一個數(shù)量級，class選擇器權(quán)重比標(biāo)簽選擇器大一個數(shù)量級；
2、class選擇器和屬性選擇器同優(yōu)先級;
3、樣式的優(yōu)先程度需要根據(jù)第1條規(guī)則計算整體的優(yōu)先級，按選擇器權(quán)重計算各條樣式規(guī)則中所有選擇器優(yōu)先級之和，哪條規(guī)則權(quán)重大，那條就說了算。如果相同那么后面的覆蓋前面的。4、像這種.dog > p開掛，多了特殊符號的，并不會增加優(yōu)勢，還是和 .dog p優(yōu)先級一樣。
然后可以拋出一個問題了：
對于下面的文檔結(jié)構(gòu)，分別對 p | .p | div p | .parent | #parent設(shè)置color屬性，那么優(yōu)先級如何呢？
<div id="parent" class="parent">
<p class="p">p</p>
</div>
結(jié)果很有意思：
也就是 .p > div p > p > #parent > .parentid選擇器居然比p選擇器優(yōu)先級還低！將p元素和div元素分開看，.p > div p > p 很正常， #parent > .parent也很正常。所以問題關(guān)鍵在子級p和父級#parent, 子級的選擇器優(yōu)先級比父級的選擇器優(yōu)先級高，或者說繼承的優(yōu)先級程度比自身的優(yōu)先級低！嵌套多一層看看就知道是不是了，分別對#parent | div | p設(shè)置color屬性：<div id="parent" class="parent"> <div class="mid"> <p id="p" class="p">p</p> <div></div>結(jié)果確實是p > div > #parent：
即使應(yīng)用兩個選擇器也無濟(jì)于事，依然是p >#parent div
但是只要能定位到p元素，那么父級選擇器的權(quán)重就起作用了,一試便知，對#parent p | #p 設(shè)置同樣的樣式結(jié)果是這樣的：
嗯，確實如此。所以：
5、css樣式優(yōu)先級還和繼承有關(guān)，繼承的優(yōu)先級不如本身應(yīng)用的優(yōu)先級高。
總結(jié)完畢，敬禮。
眾號【傳智播客博學(xué)谷】回復(fù)關(guān)鍵詞：前端 PS Java(100G) Python(80G) 大數(shù)據(jù) 區(qū)塊鏈 測試 PPT JS(40g+300教程) HTML 簡歷 領(lǐng)取相關(guān)學(xué)習(xí)資料！
一、HTML
1、<image>標(biāo)簽上title屬性與alt屬性的區(qū)別是什么？
alt屬性是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說明的。且長度必須少于100個英文字符或者用戶必須保證替換文字盡可能的短。
這包括那些使用本來就不支持圖像顯示或者圖像顯示被關(guān)閉的瀏覽器的用戶，視覺障礙的用戶和使用屏幕閱讀器的用戶等。
title屬性為設(shè)置該屬性的元素提供建議性的信息。使用title屬性提供非本質(zhì)的額外信息。參考《alt和title屬性的區(qū)別及應(yīng)用》
2、分別寫出以下幾個HTML標(biāo)簽：文字加粗、下標(biāo)、居中、字體
加粗：<b>、<strong>
下標(biāo)：<sub>
居中：<center>
字體：<font>、<basefont>、參考《HTML標(biāo)簽列表》
3、請寫出至少5個html5新增的標(biāo)簽，并說明其語義和應(yīng)用場景
section：定義文檔中的一個章節(jié)
nav：定義只包含導(dǎo)航鏈接的章節(jié)
header：定義頁面或章節(jié)的頭部。它經(jīng)常包含 logo、頁面標(biāo)題和導(dǎo)航性的目錄。
footer：定義頁面或章節(jié)的尾部。它經(jīng)常包含版權(quán)信息、法律信息鏈接和反饋建議用的地址。
aside：定義和頁面內(nèi)容關(guān)聯(lián)度較低的內(nèi)容——如果被刪除，剩下的內(nèi)容仍然很合理。
參考《HTML5 標(biāo)簽列表》
4、請說說你對標(biāo)簽語義化的理解？
a. 去掉或者丟失樣式的時候能夠讓頁面呈現(xiàn)出清晰的結(jié)構(gòu)
b. 有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標(biāo)簽來確定上下文和各個關(guān)鍵字的權(quán)重；
c. 方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動設(shè)備）以意義的方式來渲染網(wǎng)頁；
d. 便于團(tuán)隊開發(fā)和維護(hù)，語義化更具可讀性，遵循W3C標(biāo)準(zhǔn)的團(tuán)隊都遵循這個標(biāo)準(zhǔn)，可以減少差異化。
5、Doctype作用? 嚴(yán)格模式與混雜模式如何區(qū)分？它們有何意義?
聲明位于文檔中的最前面，處于 標(biāo)簽之前。告知瀏覽器以何種模式來渲染文檔。
嚴(yán)格模式的排版和 JS 運作模式是，以該瀏覽器支持的最高標(biāo)準(zhǔn)運行。
在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。
DOCTYPE不存在或格式不正確會導(dǎo)致文檔以混雜模式呈現(xiàn)。
6、你知道多少種Doctype文檔類型？
標(biāo)簽可聲明三種 DTD 類型，分別表示嚴(yán)格版本、過渡版本以及基于框架的 HTML 文檔。
HTML 4.01 規(guī)定了三種文檔類型：Strict、Transitional 以及 Frameset。
XHTML 1.0 規(guī)定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。
Standards （標(biāo)準(zhǔn)）模式（也就是嚴(yán)格呈現(xiàn)模式）用于呈現(xiàn)遵循最新標(biāo)準(zhǔn)的網(wǎng)頁，
Quirks（包容）模式（也就是松散呈現(xiàn)模式或者兼容模式）用于呈現(xiàn)為傳統(tǒng)瀏覽器而設(shè)計的網(wǎng)頁。
7、HTML與XHTML——二者有什么區(qū)別
a. XHTML 元素必須被正確地嵌套。
b. XHTML 元素必須被關(guān)閉。
c. 標(biāo)簽名必須用小寫字母。
d. XHTML 文檔必須擁有根元素。
參考《XHTML 與 HTML 之間的差異》
8、html5有哪些新特性、移除了那些元素？
a. HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲，多任務(wù)等功能的增加。
b. 拖拽釋放(Drag and drop) API
c. 語義化更好的內(nèi)容標(biāo)簽（header,nav,footer,aside,article,section）
d. 音頻、視頻API(audio,video)
e. 畫布(Canvas) API
f. 地理(Geolocation) API
g. 本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失
h. sessionStorage 的數(shù)據(jù)在頁面會話結(jié)束時會被清除
i. 表單控件，calendar、date、time、email、url、search
j. 新的技術(shù)webworker, websocket等
移除的元素：
a. 純表現(xiàn)的元素：basefont，big，center, s，strike，tt，u；
b. 對可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes；
9、iframe的優(yōu)缺點？
優(yōu)點：
a. 解決加載緩慢的第三方內(nèi)容如圖標(biāo)和廣告等的加載問題
b. iframe無刷新文件上傳
c. iframe跨域通信
缺點：
a. iframe會阻塞主頁面的Onload事件
b. 無法被一些搜索引擎索引到
c. 頁面會增加服務(wù)器的http請求
d. 會產(chǎn)生很多頁面，不容易管理。
參考《iframe的一些記錄》
10、Quirks模式是什么？它和Standards模式有什么區(qū)別？
在寫程序時我們也會經(jīng)常遇到這樣的問題，如何保證原來的接口不變，又提供更強(qiáng)大的功能，尤其是新功能不兼容舊功能時。IE6以前的頁面大家都不會去寫DTD，所以IE6就假定 如果寫了DTD，就意味著這個頁面將采用對CSS支持更好的布局，而如果沒有，則采用兼容之前的布局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。
區(qū)別：總體會有布局、樣式解析和腳本執(zhí)行三個方面的區(qū)別。
a. 盒模型：在W3C標(biāo)準(zhǔn)中，如果設(shè)置一個元素的寬度和高度，指的是元素內(nèi)容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。
b. 設(shè)置行內(nèi)元素的高寬：在Standards模式下，給等行內(nèi)元素設(shè)置wdith和height都不會生效，而在quirks模式下，則會生效。
c. 設(shè)置百分比的高度：在standards模式下，一個元素的高度是由其包含的內(nèi)容來決定的，如果父元素沒有設(shè)置百分比的高度，子元素設(shè)置一個百分比的高度是無效的用
d. 設(shè)置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效。
11、請闡述table的缺點
a. 太深的嵌套，比如table>tr>td>h3，會導(dǎo)致搜索引擎讀取困難，而且，最直接的損失就是大大增加了冗余代碼量。
b. 靈活性差，比如要將tr設(shè)置border等屬性，是不行的，得通過td
c. 代碼臃腫，當(dāng)在table中套用table的時候，閱讀代碼會顯得異常混亂
d. 混亂的colspan與rowspan，用來布局時，頻繁使用他們會造成整個文檔順序混亂。
e. 不夠語義
參考《為什么說table表格布局不好？》
12、簡述一下src與href的區(qū)別
src用于替換當(dāng)前元素；href用于在當(dāng)前文檔和引用資源之間確立聯(lián)系。
src是source的縮寫，指向外部資源的位置，指向的內(nèi)容將會嵌入到文檔中當(dāng)前標(biāo)簽所在位置
href是Hypertext Reference的縮寫，指向網(wǎng)絡(luò)資源所在位置，建立和當(dāng)前元素（錨點）或當(dāng)前文檔（鏈接）之間的鏈接
公眾號【傳智播客博學(xué)谷】回復(fù)關(guān)鍵詞：前端 PS Java Python 大數(shù)據(jù) 區(qū)塊鏈 測試 PPT JS HTML 簡歷 領(lǐng)取相關(guān)學(xué)習(xí)資料！
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
