IE6,IE7给body设置position:relative;的作用

以下情况只出现在IE6,7中。

先运行此代码,之后调整窗口大小。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>给body设置position:relative;</title> 
  6. <style type="text/css"> 
  7. body{width:500px;margin:0 auto;border:solid 1px blue;height:500px;} 
  8. #container{position:relative;} 
  9. #container span{position:absolute;left:10px;top:10px;border:solid 1px green;} 
  10. </style> 
  11. </head> 
  12. <body> 
  13. <div id="container"> 
  14. <span>当在IE6,7中改变窗口大小时,我会出现问题。</span> 
  15. </div> 
  16. </body> 
  17. </html> 

如果给#container显试设置width:100%;那么该情况只出现在IE7中:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>给body设置position:relative;</title> 
  6. <style type="text/css"> 
  7. body{width:500px;margin:0 auto;border:solid 1px blue;height:500px;} 
  8. #container{position:relative;width:100%;} 
  9. #container span{position:absolute;left:10px;top:10px;border:solid 1px green;} 
  10. </style> 
  11. </head> 
  12. <body> 
  13. <div id="container"> 
  14. <span>给#container显试设置width:100%;则该问题只会在IE7中出现。</span> 
  15. </div> 
  16. </body> 
  17. </html> 

给body设置position:relative; ,就好了:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>给body设置position:relative;</title> 
  6. <style type="text/css"> 
  7. body{width:500px;margin:0 auto;border:solid 1px blue;height:500px;position:relative;} 
  8. #container{position:relative;} 
  9. #container span{position:absolute;left:10px;top:10px;border:solid 1px green;} 
  10. </style> 
  11. </head> 
  12. <body> 
  13. <div id="container"> 
  14. <span>给body设置position:relative;感觉利大于弊(好像没有弊)。</span> 
  15. </div> 
  16. </body> 
  17. </html> 

这就是给body设置position:relative;的好处

转载请注明:代码家园 » IE6,IE7给body设置position:relative;的作用

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)