溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關CSS兼容中如何進行IE6中背景圖片設置，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
CSS兼容：一個IE6在no-repeat情況下依然重復背景圖片的BUG
背景圖片的設置是CSS布局時常用的一種屬性，應用background的url，引入背景圖片，可以設置為不重復平鋪，如下面的代碼：
background:url(https://cache.yisu.com/upload/information/20210521/366/487226.png)no-repeat;
◆在大多數情況下，此設置不會有任何問題。背景圖片按設置的形式呈現，不會平鋪于容器，無論容器是何寬度與高度。但在IE6下，有一種情況，如果未定義寬高，則會產生即使定義了no-repeat，背景圖片依然重復的BUG。
以IE6中運行下面的代碼：
SourceCodetoRun
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> <title>CSS兼容問題：一個IE6在no-repeat情況下依然重復背景圖片的BUG-www.52css.com</title> <styletypestyletype="text/css"> #bigbox{background:url(https://cache.yisu.com/upload/information/20210521/366/487226.png)no-repeat;} #smallbox{height:75px;}/*撐開bigbox*/ #marginbox{margin-top:-20px;}/*向上margin的box*/ </style> </head> <body> </head> <body> <dividdivid="bigbox"> <dividdivid="smallbox"></div> <dividdivid="marginbox"><imgsrcimgsrc="https://cache.yisu.com/upload/information/20210521/366/487249.png"width="200"height="90"/></div> <dividdivid="content"></div> </div> </body> </html>◆解決的辦法很簡單，為容器定義寬度即可。如果沒有實際寬度，可以定義為100%。此BUG不需要額外的HACK，只需要在使用時注意避免即可。解決后的代碼如下，在IE6中運行：
SourceCodetoRun
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> <title>CSS兼容問題：一個IE6在no-repeat情況下依然重復背景圖片的BUG-www.52css.com</title> <styletypestyletype="text/css"> #bigbox{width:100%;background:url(https://cache.yisu.com/upload/information/20210521/366/487226.png)no-repeat;} #smallbox{height:75px;}/*撐開bigbox*/ #marginbox{margin-top:-20px;}/*向上margin的box*/ </style> </head> <body> </head> <body> <dividdivid="bigbox"> <dividdivid="smallbox"></div> <dividdivid="marginbox"><imgsrcimgsrc="https://cache.yisu.com/upload/information/20210521/366/487273.png"width="200"height="90"/></div> <dividdivid="content"></div> </div> </body> </html>關于CSS兼容中如何進行IE6中背景圖片設置就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
