IE中background-image在鏈接轉(zhuǎn)行后未顯示的現(xiàn)象_Div+CSS教程

教程Tag：暫無Tag,歡迎添加,賺取U幣!

　　靠右邊對齊顯示，若文字有轉(zhuǎn)行，一個鏈接假如沒有完全在一行的話就沒有辦法顯示它的背景圖，但卻能顯示它的背景顏色．這個現(xiàn)象在FF中不會出現(xiàn)。

　　在IE中，background標簽是以塊來顯示，以你所包含內(nèi)容顯示區(qū)域劃為一個方塊面顯示，注重不是block但是包含block。

　　因為"假如沒有完全在一行的話"，那就是說包含了2行甚至更多，這些內(nèi)容是自適應流，可以自由顯示。但是background卻是以方塊區(qū)域包含顯示。也就是說你的一行未結(jié)束，它不是以你文檔流開始處填寫background-image，而是以你整個文檔流距左邊窗口最近的位置算起，就是另起一行的位置的上面一行開始！

　　通俗點：就是以你的文檔流區(qū)域top和left最小的那個坐標點開始運行background-image。

代碼調(diào)試框 [m.ghpqjb.com]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<style>
	*{margin:0;padding;0;line-height:20px;}
	p{border:2px solid red;width:500px;margin:50px;}
	p a,div span{margin:4px;padding-left:14px;background:url(http://img3.myking.cn/biz/all/small_pic/2_2_333333.gif) no-repeat 0 6px;}
	div{border:2px solid blue;width:500px;margin:10px 0 0 50px;}
	div a{margin:4px;padding-left:14px;background:#ccc}
</style>
</head>

<body>
<p><a href="#">無標題文檔<a href="#">無標題文檔<a href="#">無標題文檔<a href="#">無標題文檔<a href="#">無標題文檔<a href="#">無標題文檔<a href="#">無標題文檔<a href="#">無標題文檔<a href="#">無標題文檔<a href="#">無標題文檔<a href="#">無標題文檔<a href="#">無標題文檔<a href="#">無標題文檔<a href="#">無標題文檔<a href="#">無標題文檔<a href="#">無標題文檔<a href="#">無標題文檔<a href="#">無標題文檔<a href="#">無標題文檔<a href="#">無標題文檔<a href="#">無標題文檔<a href="#">無標題文檔<a href="#">無標題文檔<a href="#">無標題文檔<a href="#">無標題文檔<a href="#">無標題文檔<a href="#">無標題文檔<a href="#">無標題文檔<a href="#">無標題文檔<a href="#">無標題文檔<a href="#">無標題文檔<a href="#">無標題文檔<a href="#">無標題文檔<a href="#">無標題文檔<a href="#">無標題文檔<a href="#">無標題文檔<a href="#">無標題文檔<a href="#">無標題文檔<a href="#">無標題文檔<a href="#">無標題文檔<a href="#">無標題文檔<a href="#">無標題文檔<a href="#">無標題文檔<a href="#">無標題文檔<a href="#">無標題文檔<a href="#">無標題文檔<a href="#">無標題文檔</p>

</body>
</html>

[ 可先修改部分代碼再運行查看效果 ]

　　目前還沒有好的解決辦法，應該在布局中避免這樣的情況發(fā)生！