在IE6下面，很多显示的BUG都可以用触发hasLayout的方式去解决。但有种情况正好相反，触发hasLayout之后会产生显示的BUG。请看下面的代码：
| 以下是代码片段： <!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> <title>Demo</title> <style type="text/css"> #div1 { background: red; margin: 10px; padding: 10px; } #div2 { background: gray; margin: 30px; padding: 10px; } </style> </head> <body> <div id="div1"> <div id="div2">TEST</div> <div> </body> </html> |
上面的代码在所有浏览器里是正常显示的，包括IE6。但是给#div1设定宽度之后（触发hasLayout），经过大量测试，在IE6下#div1上面的padding会消失。有兴趣的同学可以看这篇文章：IE7-/Win: Margin collapsing and hasLayout
目前解决的办法就是去掉#div1的宽度，然后在#div1外面套一层div，在这个新div上设定宽度。解决问题的代码：
| 以下是代码片段： <!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> <title>Demo</title> <style type="text/css"> #con { width: 400px; } #div1 { background: red; margin: 10px; padding: 10px; } #div2 { background: gray; margin: 30px; padding: 10px; } </style> </head> <body> <div id="con"> <div id="div1"> <div id="div2">TEST</div> <div> </div> </body> </html> |