學電腦,學計算機 | 手機訪問 | 加入收藏 | 設為首頁 | RSS
當前位置:首頁 > 網頁制作 > HTML/CSS > 正文

list-style-image和float同時使用不能正常顯示圖片的解決方案

發布時間:2015-04-06 10:54:54  來源:電腦技術學習網
【摘要】: 網站有幾個兼容性問題沒有做好,在部分瀏覽器里顯示效果不太友好,由于沒有造成很嚴重的顯示后果,所以一直懶得做兼容性優化。

網站有幾個兼容性問題沒有做好,在部分瀏覽器里顯示效果不太友好,由于沒有造成很嚴重的顯示后果,所以一直懶得做兼容性優化。最近閑來無事,先解決第一個問題:在部分瀏覽器(IE)中list-style-image不能正常顯示圖片。

沒有辦法,只能用IE的F12開發者工具采用刪減排除法來找到問題的根本原因,最后發現是float的問題。

查找資料解釋如下:list-style是display為list-item的元素才能使用,而使用了float屬性之后,display的屬性值便不再是list-item,而是生成了一個塊級框,所以list-style和float同時使用就會造成list-style設置的屬性值沒有效果。

解決方法很簡單,用background:url(../img.png) no-repeat;來代替list-style-image即可,所有瀏覽器都兼容background元素,可根據頁面需要,將background的位置進行調整。

發表評論 共有條評論
驗證碼:
湖北省福彩30选5开奖