CSS兼容Chrome和Firefox

梦里梦外; 2022-04-10 06:23 562阅读 0赞

在做页面兼容Chrome和Firefox浏览器时，有时候会由于css样式导致两者显示不一致，比如在Chrome上显示正常，而在Firefox上可能就会出现纵向滚动条，这时候就要针对不同类型浏览器应用不同的css样式了，下面是不同的浏览器CSS hank。

比如一个css样式如下：

.consureBtn {
    		width: 30px;
    		height: 25px;
    		background: #0188fb;
    		border: none;
    		color: white;
    		margin-left: 0px;
    		margin-top:10px;
    	}

使用@media查询可以针对不同的媒体类型定义不同的样式，比如根据不同的屏幕尺寸设置不同的样式。

下面是hank Chrome浏览器的写法：

/*Chrome*/
    @media screen and (-webkit-min-device-pixel-ratio:0) {
    	.consureBtn {
    		width: 30px;
    		height: 25px;
    		background: #0188fb;
    		border: none;
    		color: white;
    		margin-left: 0px;
    		margin-top:10px;
    	}
    }

下面是hank IE9+版本的写法：

/*IE9+*/
    @media all and (min-width:0) {
      .consureBtn {
    		width: 30px;
    		height: 25px;
    		background: #0188fb;
    		border: none;
    		color: white;
    		margin-left: 0px;
    		margin-top:3px;
    	}
    }

下面是hank IE10+版本的写法：

/*IE10+*/
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){
    	.consureBtn {
    		width: 30px;
    		height: 25px;
    		background: #0188fb;
    		border: none;
    		color: white;
    		margin-left: 0px;
    		margin-top:3px;
    	}
    }

用于定位Gecko（Mozilla Firefox）的 CSS hack是以@-moz-开头的规则，这种规则不是标准规则，是Gecko引擎特定的规则。

/*Firefox*/
    @-moz-document url-prefix() {
    	.consureBtn {
    		width: 30px;
    		height: 25px;
    		background: #0188fb;
    		border: none;
    		color: white;
    		margin-left: 0px;
    		margin-top:3px;
    	}
    }

比如兼容Chrome和Firefox，在Firefox上可以看到只有@-moz-document url-prefix()的CSS规则是生效的：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rvbmd5dXh1MzQyNzE5_size_16_color_FFFFFF_t_70][]

参考文档：

[https://en.wikipedia.org/wiki/CSS\_hack\#Browser\_prefixes][https_en.wikipedia.org_wiki_CSS_hack_Browser_prefixes]

[https://developer.mozilla.org/en-US/docs/Web/CSS/@media][https_developer.mozilla.org_en-US_docs_Web_CSS_media]

[https://stackoverflow.com/questions/3123063/what-does-moz-document-url-prefix-do][https_stackoverflow.com_questions_3123063_what-does-moz-document-url-prefix-do]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rvbmd5dXh1MzQyNzE5_size_16_color_FFFFFF_t_70]: /images/20220402/7a359b4de7334bd2a9de0e195d0005aa.png
[https_en.wikipedia.org_wiki_CSS_hack_Browser_prefixes]: https://en.wikipedia.org/wiki/CSS_hack#Browser_prefixes
[https_developer.mozilla.org_en-US_docs_Web_CSS_media]: https://developer.mozilla.org/en-US/docs/Web/CSS/@media
[https_stackoverflow.com_questions_3123063_what-does-moz-document-url-prefix-do]: https://stackoverflow.com/questions/3123063/what-does-moz-document-url-prefix-do