手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >IE7下当position:fixed遇到text-align:center的解决方法
IE7下当position:fixed遇到text-align:center的解决方法
摘要:啥也不说,先看代码:IE7下当position:relative遇到text-align:centerbody{padding:0;marg...

啥也不说,先看代码:

<!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>

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

作者:菩提树下的杨过

【IE7下当position:fixed遇到text-align:center的解决方法】相关文章:

IE中div被视频遮住(用embed来内嵌视频)的解决方法

css控制div不能居中的解决办法

常用的10种CSS BUG解决方法与技巧

IE6下div层被select控件遮住的问题解决方法

firefox和谷歌不显示body背景图片的解决方法

DIV下图片自适应解决方法

div嵌套 img 空白解决方法

如何用!important解决浏览器兼容性问题

在ie7下css居中样式text-align:center;偏左问题解决方法

position:fixed或absolute时百分比参考屏幕宽度

精品推荐
分类导航