IE7下当position:fixed遇到text-align:center的解决方法
来源:互联网 发布:linux c语言遍历目录 编辑:程序博客网 时间:2024/06/08 07:34
<!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的解决方法
- IE7下当position:fixed遇到text-align:center的解决方法
- text-align: center;的兼容性
- text-align:center 与 <center> 的区别
- select option text-align:center的问题
- 关于text-align:center的浏览器兼容问题
- text-align:center 与 <CENTER>
- Layer text-align:center
- 在ie7界面居中css样式text-align:center;偏左问题
- Firefox中text-align=center的解决
- 好用的水平对齐text-align:center
- text-align的center属性值以及float总结
- margin:0 auto 和text-align:center的区别是什么???
- IE8中text-align:center偏左的解决办法
- IE8中text-align:center偏左的解决办法
- margin:0 auto 与 text-align:center 的区别
- margin:0 auto 与 text-align:center 的区别
- margin:0 auto 与 text-align:center 的区别
- 网络爬虫--之爬起校招信息代码
- android SQLiteDatabase attempt to re-open an already-closed object:
- unix学习笔记---解释器文件(interpreter file)
- Android应用自动更新功能的代码实现
- Erlang编程实战2
- IE7下当position:fixed遇到text-align:center的解决方法
- hdu4699Editor
- Hibernate Session篇--Hibernate的缓存及对象的状态
- Flex textInput图角特效
- Invalid project description
- C++11 理解 (十九) 之 使用或禁用对象的默认函数
- 汇编里面的for循环
- 求一个字符串中连续出现次数最多的子串
- uva 1407 Caves (树形背包dp)