css不同浏览器之家的兼容问题怎么解决?

html-css012

css不同浏览器之家的兼容问题怎么解决?,第1张

只能遇到兼容问题具体解决,有经验积累和学习,然后知道那些css会出现兼容问题,尽量避免,然后就是使用CSS hack,每个浏览器都有自己的专有hack,比如说ie6的hack,意思就是这段css写法,只有在ie6会执行,其他浏览不会执行,这样就能针对不同浏览器写不同的css,达到兼容。

你可以百度下CSS hack,介绍的内容非常多。

一些hack:

#test{

color:red/* 所有浏览器都支持 */

color:red !important/* Firefox、IE7支持 */

_color:red/* IE6支持 */

*color:red/* IE6、IE7支持 */

*+color:red/* IE7支持 */

color:red\9/* IE6、IE7、IE8支持 */

color:red\0/* IE8支持 */

}

body:nth-of-type(1) p{color:red} /* Chrome、Safari支持 */

*+html .list1 li{line-height:18px} //IE7hack

/* Firefox 1 - 2 */

body:empty #firefox12

{display: block}

/* Firefox */

@-moz-document url-prefix()

{#firefox { display: block}}

/* Webkit-Safari-Chrome */

@media screen and (-webkit-min-device-pixel-ratio:0){

color:red

}

/* Opera */

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)

{head~body #opera { display: block}}

不过,具体的还需要你自己尝试然后收获。

由于css具备交互 层叠 动画等功能,可以使用css来绘制许多优美的画面,CSS像艺术家一样优雅,像工程师一样严谨。所以说css像艺术家

第五届CSS大会是袁川大佬在css大会首秀,利用css-doodle制作出了很多图案,属实惊艳。css-doodle可以帮助轻松的使用Custom Elements、Shadow DOM和CSS Grid创建任何你想要的图案(CSS 图案)。(注意:css-doodle组件到目前为止只在最新的Chrome和Safari浏览器上可以正常的运行。)

你知道display这个属性么 ,这个属性是用来设置元素在页面的显示类型的。display的值有block、inline、table等。block是块级元素,inline是内联元素,table是块级表格。

你说的那句话的意思是“除了display值是table的元素,其他的都可以设置margin、padding和border属性,但是margin-top和margin-bottom对 display:inline的元素不起作用。”