IE7下當position:fixed遇到text-align:center

2021-11-12 17:57:26

啥也不說，先看代碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>IE7下當position:relative遇到text-align:center</title>

body{padding:0;margin:0}

#wrap{text-align:center}

#toolbar{width:100%;height:25px;background:#000;position:fixed;bottom:0;}

</style>

</head>

<body>

</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即可

#wrap{text-align:left}

2.使用position:fixed時，同時将bottom與right定位寫全，第一段代碼中，遺漏了right

#toolbar{width:100%;height:25px;background:#000;position:fixed;bottom:0;right:0}

繼續閱讀