Cnscorpio

IE6 Bug:Lost background!

2009-01-16
Web Standard »
4 Comments »

有很多时候，需要对某个元素进行负的margin，做一些特定的效果，和布局，如果刚好这个应用了负margin的元素也设置了background，那就会有点点麻烦，这个主要是在IE6下。

代码如下：

<!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=utf-8" /> <title>test margin-bg</title> <style type="text/css"> #shit{width:500px;height:500px;margin:0 auto;border:#333 1px solid;} #shitAgain{width:100px;height:100px;margin:0 0 0 -50px;background:#900;} </style> </head> <body> <div id="shit"> <div id="shitAgain"></div> </div> </body> </html>

Tips:You can change the code before run.

解决也很简单，那就是应用position:relative。

<!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=utf-8" /> <title>test margin-bg</title> <style type="text/css"> #shit{width:500px;height:500px;margin:0 auto;border:#333 1px solid;} #shitAgain{width:100px;height:100px;_position:relative;margin:0 0 0 -50px;background:#900;} </style> </head> <body> <div id="shit"> <div id="shitAgain"></div> </div> </body> </html>

Tips:You can change the code before run.

这个bug应该属于无法获得layout的问题，很久之前发现的bug，哈哈，存在bug库了好长时间了，偶然发现了。。

IE6 Bug:Lost background!

4 Responses to “IE6 Bug:Lost background!”

说两句吧：