javascript - 如何解决各大浏览器兼容性问题
PHPz
PHPz 2017-04-11 13:06:14
[JavaScript讨论组]

写了一个页面,结果发现在微软的ie,Egde,chrome等浏览器下显示都不相同。查找原因,发现百分比,px显示都不相同的。求问怎么解决这种bug,让所有的浏览器都显示同一个页面,而不是200px的东西在不同的浏览器不同状态

PHPz
PHPz

学习是最好的投资!

全部回复(2)
伊谢尔伦

pc端的兼容问题主要分为两种:
1.浏览器差异;
2.浏览器bug。
浏览器差异可以引用reset.css文件,对各浏览器的差异进行重置;还可以运用css hack,对不同浏览进行样式设置。
浏览器bug可以网上搜索,比如ie写的margin双倍问题,都有具体解决方案。

/ reset 文件/
html,body,h1,h2,h3,h4,h5,h6,p,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
del,ins,u,s,a,a:hover{text-decoration:none;}
body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,5b8b4f53;color:#333;outline:0;}
body{background:#fff;}
a,a:hover{color:#333;}

迷茫

200px在不同浏览器下状态不同 你确定浏览器的缩放保持一致了? 还有未必100%的缩放就能保持一致 火狐有几个版本80%的缩放相当于chrome100%的缩放 还有你的样式都重置了?

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号