97超免费视频在线观看,久久精品国产99久久无毒不卡,波多野结衣AV黑人在线播放

技術(shù)頻道 - html技術(shù)

li inside-block在IE11換行無效的原因

作者:admin 時(shí)間:2016-11-15 2:13:23 瀏覽:

近日在做一個(gè)網(wǎng)頁標(biāo)簽列表，要求不能換行，一開始以為比較容易，三兩下就把代碼寫完了，并且在Firefox和Chrome瀏覽器測(cè)試通過，不過，在IE11一看，卻出人意料的沒有達(dá)到預(yù)期效果，li inside-block 在IE11里竟然無效！照樣換行！

li inside-block在IE11照樣換行？

li inside-block 在IE11照樣換行！為何無效？難道代碼還要hack一下IE11？但我看別人網(wǎng)站里的寫法并沒有hack IE11。

其實(shí)代碼挺簡單，在Chrome和Firefox瀏覽器完全達(dá)到預(yù)期效果。

css核心代碼如下：

ul li{
    display:inline-block;
    padding:3px 4px 3px 4px;
    margin:3px 3px 3px 0px;
}

使用 display:inline-block 可設(shè)置 li 列舉不換行。

html核心代碼如下：

出來的效果應(yīng)該是這樣：

使用 display:inline-block 可設(shè)置 li 列舉不換行

而不是這樣：

無 display:inline-block 時(shí) li 列舉換行

在京東網(wǎng)頁html代碼找到IE11無效的原因

上述問題困擾了我好幾天，一度放棄了 li 列舉的這種代碼方式而采用 div 的寫法，但是還是心有不甘，因?yàn)?li 的寫法才是正道，且代碼更加簡潔。

今天在京東網(wǎng)瀏覽手機(jī)，側(cè)欄的標(biāo)簽列表吸引了我，通過查看其網(wǎng)頁html源碼，發(fā)現(xiàn)它也是用 li 列舉使用 display:inline-block 來實(shí)現(xiàn)的。

京東的標(biāo)簽列表

我決意一定要從京東的這張網(wǎng)頁上找到同時(shí)適用IE11的標(biāo)簽列表代碼。

一刻不能再等了，立即動(dòng)手。

在本地搭建的調(diào)試環(huán)境新建一html文件，把京東網(wǎng)頁的html源碼復(fù)制過來，接著采用“排除法”逐步刪減代碼，直至最后只剩下這個(gè)標(biāo)簽列舉的DIV。

通過一段時(shí)間的代碼刪減工作，最后剩下的代碼越來越少，答案也應(yīng)該越來越明朗了。

功夫不負(fù)有心人，最后終于找到了答案！困擾多天的問題終于得以解決了！

原來是網(wǎng)頁 <head></head> 里需要加入這句：

這句話的意思是，該網(wǎng)頁不使用IE兼容性視圖。

IE兼容性視圖是使用低版本的IE瀏覽器來渲染網(wǎng)頁，以免網(wǎng)頁布局產(chǎn)生錯(cuò)亂，但現(xiàn)在我們明白了，兼容性視圖會(huì)抹殺某些樣式，使網(wǎng)頁某些區(qū)塊的布局不能達(dá)到預(yù)期效果。因此，在設(shè)計(jì)網(wǎng)頁的時(shí)候，我們應(yīng)該告訴IE瀏覽器不要使用兼容性視圖來渲染此網(wǎng)頁。

本文實(shí)例演示及源碼文件下載

demo download

知識(shí)擴(kuò)展

關(guān)于X-UA-Compatible聲明

由于IE8 可能會(huì)將頁面按照 IE7 模式進(jìn)行渲染，針對(duì) 多版本IE的現(xiàn)狀，通常會(huì)采用設(shè)置 X-UA-Compatible HTTP 頭的方式將頁面在IE中采用統(tǒng)一的渲染模式。

注意: 前面的范例顯示單獨(dú)的內(nèi)容值。實(shí)際上IE只會(huì)執(zhí)行網(wǎng)頁中第一個(gè) X-UA-Compatible 標(biāo)頭。

你也可以使用內(nèi)容屬性來指定復(fù)數(shù)的文件兼容性模式，這能幫助確保你的網(wǎng)頁在未來的瀏覽器版本都能一致的顯示。欲設(shè)定復(fù)數(shù)的文件模式，請(qǐng)?jiān)O(shè)定內(nèi)容屬性以判別你想使用的模式。使用分號(hào)來分開各個(gè)模式。

如果一個(gè)特定版本的IE支持所要求的兼容性模式多于一種，將採用列于標(biāo)頭內(nèi)容屬性中最高的可用模式。你可以使用這個(gè)特性來排除特定的兼容性模式，雖然并不推薦這樣做。舉例來說，下列標(biāo)頭即會(huì)排除IE7 mode。

關(guān)于 content = "IE=edge,chrome=1" 詳解

這是個(gè)是IE8的專用標(biāo)記，用來指定IE8瀏覽器去模擬某個(gè)特定版本的IE瀏覽器的渲染方式(比如人見人煩的IE6)，以此來解決部分兼容問題，例如模擬IE7的具體方式如下：

但標(biāo)記后面出現(xiàn)chrome這樣的值，難道IE也可以模擬chrome了?

研究發(fā)現(xiàn)，原來不是微軟增強(qiáng)了IE，而是谷歌做了個(gè)外掛：Google Chrome Frame(谷歌內(nèi)嵌瀏覽器框架GCF)。這個(gè)插件可以讓用戶的IE瀏覽器外不變，但用戶在瀏覽網(wǎng)頁時(shí)，實(shí)際上使用的是Google Chrome瀏覽器內(nèi)核，而且支持IE6、7、8等多個(gè)版本的IE瀏覽器，谷歌這個(gè)墻角挖的真給力！而上文提到的那個(gè)meta標(biāo)記，則是在是安裝了GCF后，用來指定頁面使用chrome內(nèi)核來渲染。

GCF下載地址：
http://code.google.com/intl/zh-CN/chrome/chromeframe/

安裝完成后，如果你想對(duì)某個(gè)頁面使用GCF進(jìn)行渲染，只需要在該頁面的地址前加上 gcf：即可，例如： gcf:http://cooleep.com

但是如果想要在開發(fā)時(shí)指定頁面默認(rèn)首先使用GCF進(jìn)行渲染，如果未安裝GCF再使用IE內(nèi)核進(jìn)行渲染，該如何進(jìn)行呢？就是使用這個(gè)標(biāo)記。

標(biāo)記用法：

閱讀了下chrome的開發(fā)文檔(http://www.chromium.org/developers/how-tos/chrome-frame-getting-started)，下面來簡單講解一下這個(gè)標(biāo)記的語法。

1、最基本的用法

在頁面的頭部加入

用以聲明當(dāng)前頁面用chrome內(nèi)核來渲染。

復(fù)雜一些的就是本文一開始看到的那中用法：

這樣寫可以達(dá)到的效果是如果安裝了GCF，則使用GCF來渲染頁面，如果為安裝GCF，則使用最高版本的IE內(nèi)核進(jìn)行渲染。

2、通過修改HTTP頭文件的方法來實(shí)現(xiàn)讓指定的頁面使用GCF內(nèi)核進(jìn)行渲染

在HTTP的頭文件中加入以下信息：

X-UA-Compatible: chrome=1

在Apache服務(wù)器中，確保 mod_headers 和 mod_setenvif 文件可用，然后在 httpd.conf 中加入以下配置信息：

<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
BrowserMatch chromeframe gcf
Header append X-UA-Compatible "chrome=1" env=gcf
</IfModule>
</IfModule>

在IIS7或者更高版本的服務(wù)器中，只需要修改web.config文件,添加如下信息即可即可：