以下是一些适配不同浏览器的CSS代码技巧:
/*Chrome和Safari -webkit-*/ code { -webkit-transition: all .5s ease; } /*火狐 -moz-*/ code { -moz-transition: all .5s ease; } /*IE -ms-*/ code { -ms-transition: all .5s ease; } /*Opera -o-*/ code { -o-transition: all .5s ease; }
如果您需要在所有浏览器中使用相同的样式,可以使用通配符:
* { margin: 0; padding: 0; }
忽略浏览器中的某些CSS属性,你可以使用CSS Reset。CSS Reset是一段CSS代码,它在所有浏览器中被使用来移除默认样式。
html, body, div, span, h1, h2, h3, h4, h5, h6, p, ol, ul, li, img, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, output, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; }
在编写CSS时,还需要考虑到不同的浏览器的渲染机制。例如,在IE6中,position:fixed会导致页面布局错误。这样的问题可以使用条件注释来解决:
/* 针对 IE 6 的样式 */ #fixed-ele { position: absolute; top: expressionRWindow.scrollTop+'px'; }
总之,为了适配所有浏览器,大家应该编写不仅仅是正确的,还要是可靠的CSS代码。