浏览器兼容性记录

实际中遇到的浏览器兼容性记录

默认是和chrome比较/区别

一 ie

width：initial无效；前面加 width:auto;
top：initial同
ie :before伪元素，不支持font-size:3em
rem是支持的

https://connect.microsoft.com/IE/feedback/details/813398/ie-11-css-before-with-font-size-in-em-units-ignores-css-precedence-rules
https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/107657/

1 ie10 不支持（ie10以上支持）

2 ie9 不支持（ie9以上支持）

3 ie8 不支持（ie8以上支持）

CSS3：圆角，阴影，flex布局,opacity
- 圆角和阴影：PIE.js pie.htc ; 阴影只能黑色
- Opacity:可以通过jq解决—定义方式不一样：filter(opacity:50)

4 ie7 不支持（ie7以上支持）

table—cell

5 ie6、ie5

二 ff

table下div，100%布局时，ff要给table下子元素设置高度px或者100%，不能只设置table的高度
ff下iframe高度不会撑开父元素，导致下面的区块出现在video上；控制条高度，和中间圆点和chrome也不一样

三 safari

windows safari 不做考虑；默认MacOS safari

四国产浏览器（360/QQ/UC等）

目前，还没有做过

二- 分别匹配不同的浏览器

ie6: _, , \9
ie7: !import, , *+, \9
ie8: !import, \9, \0
ff: !import,
safari/opera:!import, nth-of-type(1)

@media screen and (-webkit-min-device-pixel-ratio:0) {
    /* Webkit内核兼容CSS选择器样式，chrome safari */
}
@media screen and(-ms-high-contrast:active),(-ms-high-contrast:none) {
    //ie10,11，\9不行
    //https://www.jb51.net/css/104691.html
}
@supports (display: -moz-box) {// firefox
    //https://developer.mozilla.org/en-US/docs/Web/CSS/%40supports
}
@-moz-document url-prefix() {// 该规则只在 Firefox 中有效，而且还必须要加 -moz- 前缀！
    //https://developer.mozilla.org/en-US/docs/Web/CSS/@document 
    //（This is an experimental technology）
}

url()：匹配整个URL；
url-prefix()：匹配文档的URL是否以参数指定的值开头；
domain()：匹配文档的域名是否为参数中指定的域名或者为它的子域名；
regexp()：匹配文档的URL是否和参数中指定的正则表达式匹配.该表达式必须匹配整个URL。

Mozilla CSS: extensionshttps://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions

一- 移动设备

伪元素:before，的样式（颜色等）在低端机中无效
某些设备（低端机）中无法播放视频

galaxy note8 分辨率，dpi有点高：横屏媒体查询直接显示了pc端样式
参考 acuview.css中的媒体查询

@media (min-resolution: 522dpi),(-webkit-min-device-pixel-ratio: 3), (min--moz-device-pixel-ratio: 3), (-o-min-device-pixel-ratio: 3/1), (min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
    #video, #frmVideo{
        height:260px;
    }
}