IE中background-image在链接转行后未显示的现象_Div+CSS教程

教程Tag：暂无Tag,欢迎添加,赚取U币!

　　靠右边对齐显示，若文字有转行，一个链接假如没有完全在一行的话就没有办法显示它的背景图，但却能显示它的背景颜色．这个现象在FF中不会出现。

　　在IE中，background标签是以块来显示，以你所包含内容显示区域划为一个方块面显示，注重不是block但是包含block。

　　因为"假如没有完全在一行的话"，那就是说包含了2行甚至更多，这些内容是自适应流，可以自由显示。但是background却是以方块区域包含显示。也就是说你的一行未结束，它不是以你文档流开始处填写background-image，而是以你整个文档流距左边窗口最近的位置算起，就是另起一行的位置的上面一行开始！

　　通俗点：就是以你的文档流区域top和left最小的那个坐标点开始运行background-image。

代码调试框 [www.mb5u.com]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//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>

[ 可先修改部分代码再运行查看效果 ]

　　目前还没有好的解决办法，应该在布局中避免这样的情况发生！