最近在调试学建站网的时候,发现登陆模块中的社会化媒体登陆样式在火狐浏览器下有些错位,在谷歌或360等常用浏览器下是正常显示的,所以这个时候就想到使用不同浏览器使用不同样式的判断语句,最终完美解决问题。如果你也遇到了不同浏览器之间的hack问题,可以通过本文以下语句实现css在不同浏览器使用不同样式。

例如我们需要增加的样式为:
.classname{
margin-top:-15px;
}

那么在IE8浏览器下的书写方式为:
.classname{
margin-top:-15px\0;
}

IE9浏览器下的书写格式为:
.classname{
margin-top:-15px\9\0;
}

IE8和IE9浏览器同时兼容的格式为:
.classname{
margin-top:-15px\8\9\0;
}

火狐浏览器的单独写法为:
/* Firefox */
@-moz-document url-prefix() {
.classname{
margin-top:-15px;
}
}

谷歌浏览器的单独写法为:
/* Chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {
.classname{
margin-top:-15px;
}
}

火狐谷歌同时兼容的写法为:
/* Chrome 和 opera */
@media all and (min-width:0){
.classname{
margin-top:-15px;
}
}

声明:本站分享的WordPress主题/插件均遵循 GPLv2 许可协议(免费开源),相关介绍资料仅供学习参考,实际版本可能会因版本迭代或开发者调整而产生变化,如程序中涉及有第三方原创图像、设计模板、远程服务等内容,应获得作者授权后方可使用。本站不提供该程序/软件的产品授权与技术服务,亦不收取相关费用。