如何解决各大浏览器兼容性问题

Question

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

Answer 1

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

/ reset 文件/
html,body,h1,h2,h3,h4,h5,h6,div,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;}

Answer 2

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