|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
li inside-block在IE11換行無效的原因
作者:admin 時間:2016-11-15 2:13:23 瀏覽:近日在做一個網(wǎng)頁標簽列表，要求不能換行，一開始以為比較容易，三兩下就把代碼寫完了，并且在Firefox和Chrome瀏覽器測試通過，不過，在IE11一看，卻出人意料的沒有達到預期效果，li inside-block 在IE11里竟然無效！照樣換行！
li inside-block在IE11照樣換行？
li inside-block 在IE11照樣換行！為何無效？難道代碼還要hack一下IE11？但我看別人網(wǎng)站里的寫法并沒有hack IE11。
其實代碼挺簡單，在Chrome和Firefox瀏覽器完全達到預期效果。
css核心代碼如下：
ul li{
display:inline-block;
padding:3px 4px 3px 4px;
margin:3px 3px 3px 0px;
}
使用 display:inline-block 可設置 li 列舉不換行。
html核心代碼如下：
<ul>
<li>tag1</li>
<li>tag2</li>
<li>tag3</li>
</ul>
出來的效果應該是這樣：
使用 display:inline-block 可設置 li 列舉不換行
而不是這樣：
無 display:inline-block 時 li 列舉換行
在京東網(wǎng)頁html代碼找到IE11無效的原因
上述問題困擾了我好幾天，一度放棄了 li 列舉的這種代碼方式而采用 div 的寫法，但是還是心有不甘，因為 li 的寫法才是正道，且代碼更加簡潔。
今天在京東網(wǎng)瀏覽手機，側(cè)欄的標簽列表吸引了我，通過查看其網(wǎng)頁html源碼，發(fā)現(xiàn)它也是用 li 列舉使用 display:inline-block 來實現(xiàn)的。
京東的標簽列表
我決意一定要從京東的這張網(wǎng)頁上找到同時適用IE11的標簽列表代碼。
一刻不能再等了，立即動手。
在本地搭建的調(diào)試環(huán)境新建一html文件，把京東網(wǎng)頁的html源碼復制過來，接著采用“排除法”逐步刪減代碼，直至最后只剩下這個標簽列舉的DIV。
通過一段時間的代碼刪減工作，最后剩下的代碼越來越少，答案也應該越來越明朗了。
功夫不負有心人，最后終于找到了答案！困擾多天的問題終于得以解決了！
原來是網(wǎng)頁 <head></head> 里需要加入這句：
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
這句話的意思是，該網(wǎng)頁不使用IE兼容性視圖。
IE兼容性視圖是使用低版本的IE瀏覽器來渲染網(wǎng)頁，以免網(wǎng)頁布局產(chǎn)生錯亂，但現(xiàn)在我們明白了，兼容性視圖會抹殺某些樣式，使網(wǎng)頁某些區(qū)塊的布局不能達到預期效果。因此，在設計網(wǎng)頁的時候，我們應該告訴IE瀏覽器不要使用兼容性視圖來渲染此網(wǎng)頁。
本文實例演示及源碼文件下載
知識擴展
關于X-UA-Compatible聲明
由于IE8 可能會將頁面按照 IE7 模式進行渲染，針對 多版本IE的現(xiàn)狀，通常會采用設置 X-UA-Compatible HTTP 頭的方式將頁面在IE中采用統(tǒng)一的渲染模式。
<meta http-equiv="X-UA-Compatible" content="IE=4"> <!-- IE5 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=7.5"> <!-- IE7 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=100"> <!-- IE8 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=a"> <!-- IE5 mode -->
<!-- This header mimics Internet Explorer 7 and uses
<!DOCTYPE> to determine how to display the Web page -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
注意: 前面的范例顯示單獨的內(nèi)容值。實際上IE只會執(zhí)行網(wǎng)頁中第一個 X-UA-Compatible 標頭。
你也可以使用內(nèi)容屬性來指定復數(shù)的文件兼容性模式，這能幫助確保你的網(wǎng)頁在未來的瀏覽器版本都能一致的顯示。欲設定復數(shù)的文件模式，請設定內(nèi)容屬性以判別你想使用的模式。使用分號來分開各個模式。
如果一個特定版本的IE支持所要求的兼容性模式多于一種，將採用列于標頭內(nèi)容屬性中最高的可用模式。你可以使用這個特性來排除特定的兼容性模式，雖然并不推薦這樣做。舉例來說，下列標頭即會排除IE7 mode。
<meta http-equiv="X-UA-Compatible" content="IE=5; IE=8" />
關于 content = "IE=edge,chrome=1" 詳解
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
這是個是IE8的專用標記，用來指定IE8瀏覽器去模擬某個特定版本的IE瀏覽器的渲染方式(比如人見人煩的IE6)，以此來解決部分兼容問題，例如模擬IE7的具體方式如下：
<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />
但標記后面出現(xiàn)chrome這樣的值，難道IE也可以模擬chrome了?
研究發(fā)現(xiàn)，原來不是微軟增強了IE，而是谷歌做了個外掛：Google Chrome Frame(谷歌內(nèi)嵌瀏覽器框架GCF)。這個插件可以讓用戶的IE瀏覽器外不變，但用戶在瀏覽網(wǎng)頁時，實際上使用的是Google Chrome瀏覽器內(nèi)核，而且支持IE6、7、8等多個版本的IE瀏覽器，谷歌這個墻角挖的真給力！而上文提到的那個meta標記，則是在是安裝了GCF后，用來指定頁面使用chrome內(nèi)核來渲染。
GCF下載地址：
http://code.google.com/intl/zh-CN/chrome/chromeframe/
安裝完成后，如果你想對某個頁面使用GCF進行渲染，只需要在該頁面的地址前加上 gcf： 即可，例如： gcf:http://cooleep.com
但是如果想要在開發(fā)時指定頁面默認首先使用GCF進行渲染，如果未安裝GCF再使用IE內(nèi)核進行渲染，該如何進行呢？就是使用這個標記。
標記用法：
閱讀了下chrome的開發(fā)文檔(http://www.chromium.org/developers/how-tos/chrome-frame-getting-started)，下面來簡單講解一下這個標記的語法。
1、最基本的用法
在頁面的頭部加入
<meta http-equiv = "X-UA-Compatible" content = "chrome=1" >
用以聲明當前頁面用chrome內(nèi)核來渲染。
復雜一些的就是本文一開始看到的那中用法：
<meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />
這樣寫可以達到的效果是如果安裝了GCF，則使用GCF來渲染頁面，如果為安裝GCF，則使用最高版本的IE內(nèi)核進行渲染。
2、通過修改HTTP頭文件的方法來實現(xiàn)讓指定的頁面使用GCF內(nèi)核進行渲染
在HTTP的頭文件中加入以下信息：
X-UA-Compatible: chrome=1
在Apache服務器中，確保 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或者更高版本的服務器中，只需要修改web.config文件,添加如下信息即可即可：
<configuration >
<system.webServer >
<httpProtocol >
<customHeaders >
<add name = "X-UA-Compatible" value = "chrome=1" />
</customHeaders >
</httpProtocol >
</system.webServer >
</configuration >
標簽: li inside-block
