CSS的兼容性
水平居中问题
1 | IE下只要设置body{text-align:center;}这样就可以居中显示。Firefox需要设置为:body:{text-align:center;margin:0px auto;} |
宽度问题
1 2 | 若给div一个 width:300px;padding:10px;Firefox实际宽度320px,要算上左右的padding;支持!important,IE忽略 IE6实际宽300px,padding是300px里面的,把content往里面挤;页面的最小宽度IE不认得 min -,而它实际上把 width当做最小宽度来使。为了让这一命令在IE上也能用,可以把一个<div> 放到 <body> 标签下,然后为div指定一个类,然后CSS这样设计: #container{ min -width: 600px; width:expression(document.body.clientWidth < 600? "600px" : "auto" );} 第一个 min -width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。 |
在mozilla firefox和IE中的BOX模型解释不一致导致相差2px
div{margin:30px!important;margin:28px;}
CSS透明问题
IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF:opacity:0.6。(Firefox)
[注] 最好两个都写,并将opacity属性放在下面。
圆角问题
IE:ie7以下版本不支持圆角。
FF: -moz-border-radius:4px(Firefox)
IE的双边距bug
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
解决方案:在这个div里面加上display:inline;
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步