您当前的位置: 首页 > 技术文章 > 前端开发

DIV+CSS构建网站时常会出现浏览器不兼容的问题,下面整理了一些常见不兼容问题,及解决办法!

作者:licqi 时间:2011-01-21阅读数:人阅读
DIV+CSS构建网站时常会出现浏览器不兼容的问题,下面整理了一些常见不兼容问题,及解决办法!­ 1、用!important解决IE和Mozilla的布局差别­ !important是CSS1就定义的语法,作用是提高指定样式规则的应用优先权,最重要的一点是:IE一直都不支持这个语法,而其他的浏览器都支持。因此我们就可以利用这一点来分别给IE和其他浏览器不同的样式定义,例如,我们定义这样一个样式:­ .colortest{ border:20pxsolid#60A179!important; border:20pxsolid#00F; padding:30px; width:300px;}­ 在Mozilla中浏览时候,能够理解!important的优先级,因此显示#60A179的颜色;在IE中浏览时候,不能够理解!important的优先级,因此显示#00F的颜色。­ 2、解决超链接访问过后hover样式不显示的问题­ 改变CSS属性的排列顺序: 先后顺序标准应为:a:link—a:visited—a:hover—a:active­ 3、Li中内容超过长度后以省略号显示的方法­ ­ web标准常见问题大全web标准常见问题大全­ web标准常见问题大全web标准常见问题大全­ ­ 4、margin和padding定义尺寸的缩写­ margin:3px——表示所有边都是3px;­ margin:3px 5px—— 表示top和bottom的值是3px ,right和left的值是5px­ margin:3px 5px 7px——表示top的值是3,right和left的值是5,bottom的值是7­ margin:3px 5px 7px 5px——四个值依次表示top,right,bottom,left;上右下左。­ 5、解决IE不能正确显示透明PNG——header内加入代码­ 程序代码­ ­ [js]function correctPNG()­ {­ for(var i=0; i"­ img.outerHTML = strNewHTML­ i = i-1­ }­ }­ }­ window.attachEvent("onload", correctPNG);[/js] ­ ­ 6、ul在Firefox和IE下表现不同­ 使用(padding:0; margin:0; list-style:inside;)或者(padding:0; margin:0; list-style:none;)实现兼容,参考地址:http://and8.net/article.asp?id=273­ 7、BOX模型在firefox和IE中的解释相差2px的解决方法­ [css]div{margin:30px!important;margin:28px;}[/css] 注意这两个margin的顺序一定不能写反。根据上面提到的IE并不支持!important,所以在IE下其实解释成这样:­ [css]div{maring:30px;margin:28px}[/css] 重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important;­ 8、margin的默认效果­ div里的内容,ie默认为居中,而ff默认为左对齐。使ff内容居中的方法是增加代码margin:auto;

本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱:licqi@yunshuaiweb.com

加载中~
如果您对我们的成果表示认同并且觉得对你有所帮助可以给我们捐赠。您的帮助是对我们最大的支持和动力!
捐赠我们
扫码支持 扫码支持
扫码捐赠,你说多少就多少
2
5
10
20
50
自定义
您当前余额:元
支付宝
微信
余额

打开支付宝扫一扫,即可进行扫码捐赠哦

打开微信扫一扫,即可进行扫码捐赠哦

打开QQ钱包扫一扫,即可进行扫码捐赠哦