适用于 Internet Explorer、Firefox、Chrome、Safari 和 Edge 浏览器的 CSS 样式表
如果你使用 HTML 和 CSS，那么你肯定会遇到很多浏览器相关的 CSS 问题。我也遇到过类似的问题，而且有时这些问题真的很难解决。我们可以通过编写浏览器特定的 CSS 来解决其中一些问题。但
我个人建议避免使用浏览器特定的 CSS，因为它依赖于浏览器及其版本，即使是同一浏览器的不同版本，它也可能失效。
目录
Internet Explorer、
Microsoft Edge、
Chrome、
Safari
、Firefox、
Opera
#Internet Explorer
/* Using conditional comments with stylesheet */
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="only-ie.css" />
<![endif]-->
/* Using conditional comments with head section CSS */
<!--[if IE]>
<style type="text/css">
/************ css for all IE browsers ****************/
</style>
<![endif]-->
/* Using conditional comments with HTML elements */
<!--[if IE]> <div class="ie-only"> /*content*/ </div> <![endif]-->
Using media query
/* IE10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
selector { property:value; }
}
/* IE6,7,9,10 */
@media screen and (min-width: 640px), screen\9 {
selector { property:value; }
}
/* IE6,7 */
@media screen\9 {
selector { property:value; }
}
/* IE8 */
@media \0screen {
selector { property:value; }
}
/* IE6,7,8 */
@media \0screen\,screen\9 {
selector { property:value; }
}
/* IE9,10 */
@media screen and (min-width:0\0){
selector { property:value; }
}
#Microsoft Edge
@supports (-ms-ime-align:auto) {
selector {
property: value;
}
}
＃铬合金
/* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0)
and (min-resolution:.001dpcm) {
selector{ property:value; }
}
/* Chrome 22-28 */
@media screen and(-webkit-min-device-pixel-ratio:0) {
selector { -chrome-:only (;
property:value;
);}
}
/* Chrome, Safari, and also the Edge Browser and Firefox */
@media and (-webkit-min-device-pixel-ratio:0) {
selector { property:value; }
}
#Safari
/* Safari 11+ */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (stroke-color:transparent) {
selector {
property:value;
}
}}
/* Safari 10.1 */
@media not all and (min-resolution:.001dpcm){
@supports (-webkit-appearance:none) and (not (stroke-color:transparent)) {
selector {
property:value;
}
}}
/* Safari 6.1-10.0 (not 10.1) */
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0){
@media {
selector {
property:value;
}
}}
#火狐
@-moz-document url-prefix() {
selector {
property:value;
}
}
Or
/* By useing @supports */
@supports (-moz-appearance:none) {
selector { property:value; }
}
＃歌剧
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
selector {css rule}
}