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

站长资源 2024/12/24 佚名

2 0 1

黑松山资源网 Design By www.paidiu.com

啥也不说，先看代码:

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

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,text-align

黑松山资源网 Design By www.paidiu.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

黑松山资源网 Design By www.paidiu.com

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

暂无评论...

www.paidiu.com 黑松山资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

最新文章

群星《奔赴！万人现场第2期》[FLAC/分轨][5

2024/12/24

群星《奇妙浪一夏 (上海迪士尼度假区音乐)》

2024/12/24

群星《奇妙浪一夏 (上海迪士尼度假区音乐)》

2024/12/24

【古典音乐】詹姆斯·高威《季节》1993[WAV+

2024/12/24

贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]

2024/12/24

一句话新闻

一口气升级7个大模型SaaS应用，百度智能云：突出一个“开箱即用” - 2024/12/24

这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。

一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。

另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。

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

css 条件注释区分非IE浏览器

IE8 css overflow:hidden不起作用

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

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接