IE7下当position:fixed遇到textalign:center

zoukankan html css js c++ java

IE7下当position:fixed遇到textalign:center

啥也不说，先看代码:
<!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{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{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{100%;height:25px;background:#000;position:fixed;bottom:0;right:0} </style> </head> <body> <div id="wrap"> <div id="toolbar"></div> </div> </body> </html>

作者：菩提树下的杨过
出处：http://yjmyzz.cnblogs.com
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

查看全文

相关阅读:
中断触发方式的比较（转载）
extern使用方法详解（转载）
C#面向对象设计模式纵横谈(视频课程讲师：李建忠) 转载
 软件产品保障
 扩展字段设计
 ASP.NET(5):虚拟路径转换到物理路径的一种实现方法,不用MapPath
将内容文件输出到测试项目中目录中。
“”(十六进制值 0x1D)是无效的字符
 A Join extension method for the dynamic Linq
软件就要做的神形兼备

原文地址：https://www.cnblogs.com/yjmyzz/p/1675064.html