IE7下当position:fixed遇到text-align:center的解决方法
2013-08-23 16:10
288 查看
<!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的解决方法
- IE7下当position:fixed遇到text-align:center
- 在ie7下css居中样式text-align:center;偏左问题解决方法
- 元素加了position:absolute则该元素的text-align:center居中失效的解决办法
- Firefox中text-align=center的解决
- 当div属性有 position: fixed 属性时,flash文件显示在最顶层遮挡div层级解决方法
- 几种解决position:fixed 抖动的方法
- 【原创】HP Quality Center软件,在IE8、IE9下无法访问问题解决方法
- 本人遇到的在ie中出现的jquery.form.js拒绝访问的解决方法
- IE兼容text-align的方法
- IE6不支持position:fixed的解决方法
- IE支持text-align:center,而在FireFox无效问题
- 解决IE6下position:fixed失效的方法
- IE8.0 下position = fixed 和margin:0 auto 不生效 解决方法
- IE8中text-align:center偏左的解决办法
- margin:0auto与body{text-align:center;}实现元素居中 两种方法的异同
- 让IE也支持margin居中告别text-align:center
- 安卓中经常使用控件遇到问题解决方法(持续更新和发现篇幅)(在textview上加一条线、待续)
- 使用webpack2和extract-text-webpack-plugin时遇到Chunk.entry was removed. Use hasRuntime()错误的解决方法