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

ttx9n · 发表于 2010-3-5 00:07:16

IE7下当position:fixed遇到text-align:center 的一些状况，大家可以参考下。啥也不说，先看代码:

提示：您可以先修改部分代码再运行

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>
提示：您可以先修改部分代码再运行
作者：菩提树下的杨过

q215357618 · 发表于 2022-12-14 07:08:18

为全额万千瓦

sykzus · 发表于 2022-12-30 03:15:21

先把创新班才能下班才能下班

wqpa63gz · 发表于 2023-1-31 07:38:01

天天源码论坛

Anthonylam · 发表于 2023-4-14 19:48:16

撒旦撒旦撒擦擦擦擦

i1efp6c · 发表于 2023-5-22 00:08:15

建军节建军节建军节建军节

errol123 · 发表于 2023-9-25 01:53:24

论坛有你更精彩！

溪谷玉贤 · 发表于 2024-3-8 08:07:28

的沙发水电费水电费

dingzhi521 · 发表于 2024-6-4 12:39:08

那三门，你们谁寂寞才快乐撒

u6h2m4 · 发表于 2024-6-20 05:33:33

强烈支持楼主ing……

账号		自动登录	找回密码
密码			立即注册

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

相关帖子