经常遇到的浏览器的兼容性有哪些？原因、解决方法是什么？
网站开发中也会碰到各种各样的兼容性问题特别让人头疼，我根据自己的经验，和一些网上的资料，总结了下面这些，还有很多别的兼容性问题，日后持续更新（ps:部分语言表达的可能不太好或者错误的，欢迎指出错误，我也会持续更正）。
1. IE6不支持png-24透明图片，问题出现的浏览器：IE6及其更低的版本
问题描述：在IE6浏览器上，使用png24为的图片不透明，出现背景。
解决方法：图片使用gif格式，或者png-8格式图片。
2. 3像素问题，问题出现的浏览器：IE6及其更低的版本
问题描述：两个相邻的div之间有3个像素的空隙，一个div使用了float,而另一个没有使用产生的。
解决方法：对另一个div也使用float;
给浮动的div添加属性margin-right:-3px,但是这样写，在其他浏览器又会不正常，所以我们需要添加IE6的hack，在属性margin-right前添加下划线 _margin-right:-3px.(IE6以及更低版本的hack，是在属性前面添加下划线 _ )
3. 浏览器默认的margin和padding不同，
解决方案是加一个全局的*{margin:0;padding:0;}来统一。
补充：关于这个问题，回答的不是太全面，我再网上看的视频和一些别人的解决方法对于清除浏览器默认的标签样式的时候
主要有两种：
1.css resert在网上搜索这个，拷贝这个重置代码，缺点是所有的样式都被统一了，例如h1,h2,h3都被统一字体了，font-size都成了100%，就是下面这段代码（我从https://meyerweb.com/eric/tools/css/reset/这里拷贝过来了，如下）。
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}2.在网上搜索 normalize css,可以使用npm install,或者在http://www.bootcdn.cn/这个网址里面搜索normalize css，然后直接引入既可使用。
(我比较喜欢这个清除默认样式的方法)
4. IE5-IE8不支持opacity
问题出现的浏览器：IE8及其更低的版本
问题描述：IE5-IE8不支持css属性opacity
解决方法：这时可以另外添加ie滤镜alpha,如下：
Opacity:0.8;
Filter:alpha(opacity=80);
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(opacity=80)”;
5. IE6不能定义1px左右宽度的容器
问题出现的浏览器：IE6及其更低的版本
问题描述：创建一个高度为1px的容器，在IE6中没效果。
解决方法：因为行高line-height在IE6下有默认值，设置 line-height:1px|overflow:hidden|zoom:0.08.
6. IE6不支持min-*:，问题出现的浏览器：IE6及其更低的版本
问题描述：IE6不支持min-height属性。即使定义了元素高度，如果内容超过元素的高度，IE6在解析时，会自动延长元素的高度。
解决方法：利用IE6不识别！Important，给元素设置固定高度，并且设置元素高度自动。
Height : auto ! important;
Height:300px;
Min_height:300px;
因为IE6不识别!Important，它只识别到了height:300px,当内容超过300px时,它会自动延长高度。IE7以及其他浏览器都识别！Important，虽然定义了Height:300px,但是！Important的优先级别最高。所以内容超过300px时，还是会自动延长。
7. 双外边距浮动问题：IE6及其更低的版本。
问题描述：块属性标签float后，又有横行的margin情况下，在IE 6显示margin 比设置的大。
任何浮动的元素上的外边距加倍，例如：如果元素设置的外边距为maigin-left:15px, 在浏览器里会显示为margin-left:30px.
解决办法：将元素的display属性设置为inline，因为元素是浮动的，所以这么设置
不会影响元素在浏览器的显示。块级元素就加display：inline；行内元 素转块级元素display：inline后面再加display：table。
.bb{
background-color:#f1ee18; /*所有识别*/
.background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff; /*IE6、7识别*/
_background-color:#1e0bd1; /*IE6识别*/
}
8. Firefox点击链接出现的虚线框：Firfox浏览器
问题描述：Firefox浏览器在点击链接时，会自动在元素周围添加一个虚线边框。
解决方法：我们为了和其他浏览器保持一致，需要去掉虚线框，我们可以给a标签设 置outline属性，如下：
a{outline:none;}
a:focus{outline:none;}