IE7下当position:fixed遇到text-align:center的解决方法

最新推荐文章于 2022-11-28 16:43:16 发布

ufojoan

最新推荐文章于 2022-11-28 16:43:16 发布

阅读量666

点赞数

分类专栏：前端

前端专栏收录该内容

98 篇文章 0 订阅

订阅专栏

<!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>IE7下当position:relative遇到text-align:center</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <style type="text/css">
      body{padding:0;margin:0}      
      #wrap{text-align:center}
      #toolbar{width:100%;height:25px;background:#000;position:fixed;bottom:0;}
    </style>
</head>
<body>
 <div id="wrap"> 
 <div id="toolbar"></div>
 </div> 
</body>
</html>

IE7(或IE8的兼容模式)下运行代码会发现，底部的toolbar栏，宽度只有一半了(FF,Chrome等浏览器能正常解析)
触发条件：
1.IE7/IE8兼容模式
2.position:fixed定位时，仅写了bottom或top，遗漏了right或left
3.position:fixed外层容器中使用了text-align:center

解决办法:

1.position:fixed对应元素的"外层容器"中的text-align:center去掉，或改成text-align:left即可

<!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>IE7下当position:relative遇到text-align:center</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <style type="text/css">
      body{padding:0;margin:0}
      #wrap{text-align:left}
      #toolbar{width:100%;height:25px;background:#000;position:fixed;bottom:0;}
    </style>
</head>
<body>
 <div id="wrap"> 
 <div id="toolbar"></div>
 </div> 
</body>
</html>

2.使用position:fixed时，同时将bottom与right定位写全，第一段代码中，遗漏了right

<!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>IE7下当position:relative遇到text-align:center</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <style type="text/css">
      body{padding:0;margin:0}
      #wrap{text-align:center}
      #toolbar{width:100%;height:25px;background:#000;position:fixed;bottom:0;right:0}
    </style>
</head>
<body>
 <div id="wrap"> 
 <div id="toolbar"></div>
 </div> 
</body>
</html>