您好,登錄后才能下訂單哦!
li inside-block在IE11為什么會換行無效?這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純热荩屛覀円黄饋砜纯窗桑?/p>
近日在做一個網頁標簽列表,要求不能換行,一開始以為比較容易,三兩下就把代碼寫完了,并且在Firefox和Chrome瀏覽器測試通過,不過,在IE11一看,卻出人意料的沒有達到預期效果,li inside-block 在IE11里竟然無效!照樣換行!
li inside-block在IE11照樣換行?
li inside-block 在IE11照樣換行!為何無效?難道代碼還要hack一下IE11?但我看別人網站里的寫法并沒有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 列舉換行
在京東網頁html代碼找到IE11無效的原因
上述問題困擾了我好幾天,一度放棄了 li 列舉的這種代碼方式而采用 div 的寫法,但是還是心有不甘,因為 li 的寫法才是正道,且代碼更加簡潔。
今天在京東網瀏覽手機,側欄的標簽列表吸引了我,通過查看其網頁html源碼,發(fā)現它也是用 li 列舉使用 display:inline-block 來實現的。
京東的標簽列表
我決意一定要從京東的這張網頁上找到同時適用IE11的標簽列表代碼。
一刻不能再等了,立即動手。
在本地搭建的調試環(huán)境新建一html文件,把京東網頁的html源碼復制過來,接著采用“排除法”逐步刪減代碼,直至最后只剩下這個標簽列舉的DIV。
通過一段時間的代碼刪減工作,最后剩下的代碼越來越少,答案也應該越來越明朗了。
功夫不負有心人,最后終于找到了答案!困擾多天的問題終于得以解決了!
原來是網頁 <head></head> 里需要加入這句:
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
這句話的意思是,該網頁不使用IE兼容性視圖。
IE兼容性視圖是使用低版本的IE瀏覽器來渲染網頁,以免網頁布局產生錯亂,但現在我們明白了,兼容性視圖會抹殺某些樣式,使網頁某些區(qū)塊的布局不能達到預期效果。因此,在設計網頁的時候,我們應該告訴IE瀏覽器不要使用兼容性視圖來渲染此網頁。
感謝各位的閱讀!看完上述內容,你們對li inside-block在IE11為什么會換行無效大概了解了嗎?希望文章內容對大家有所幫助。如果想了解更多相關文章內容,歡迎關注億速云行業(yè)資訊頻道。
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。