兼容ie 火狐 谷歌等各大浏览器css hack代码总结
2013-04-30 14:09
399 查看
今日整理网站的 CSS 的时候发现我的网站在 Firefox下面出现了变形的情况,这个时候我急啊.
我就到网上找了很多资料,最后发现下面的内容比较实用:熟悉CSS的朋友一定对CSShack十分了解了,现在IE浏览器、Firefox浏览器、Chrome浏览器、Opera浏览器、Safari浏览器百家争鸣,可苦了我们这些Web前端开发人员了。
我在这里稍微整理了一下前面了解的各浏览器的CSS hack,打包奉献一下,哈哈。
各浏览器CSS hack兼容表:
代码示例:
#test{
color:red;
color:red !important;
_color:red;
*color:red;
*+color:red;
color:red\9;
color:red\0;
}
body:nth-of-type(1)p{color:red;}
补充说明下 这段代码火狐也认得
谷歌支持采用这段比较好
@mediascreen and (-webkit-min-device-pixel-ratio:0){#test{
color:red;
}}
其他说明:
1、如果你的页面对IE7兼容没有问题,又不想大量修改现有代码,同时又能在IE8中正常使用,微软声称,开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题,此代码如下:
2、body:nth-of-type(1) 如果这样写,表示全局查找body,将会对应第一个
。
3、还有其他写法,比如:
*html #test{}或者 *+html #test{}
4、*+html 对IE7的hack 必须保证HTML顶部有如下声明:
http://www.w3.org/TR/html4/loose.dtd
5、顺序:Firefox、IE8、IE7、IE6依次排列。
小知识:什么是CSS hack?
由于不同的浏览器,比如IE6、IE7、IE8、Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。
这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack,也叫写CSS hack。
心星语林2013-01-16 17:10:09 [举报]
以下实际网页运用 贴上来分享大家参考下
#test{
width:400px;/*Firefox*/
_width:400px;/*IE6*/
*+width:375px; /*IE7*/
width:375px\0;/*IE8*/
width:375px\9\0;/*IE9*/
}
/*body:nth-of-type(1) #test{
width:375px;
}*/
@media screen and (-webkit-min-device-pixel-ratio:0) { #test{
width:375px; /*Chrome*/
} }
原文链接:http://blog.sina.com.cn/s/blog_a30e29fc0101auu4.html
我就到网上找了很多资料,最后发现下面的内容比较实用:熟悉CSS的朋友一定对CSShack十分了解了,现在IE浏览器、Firefox浏览器、Chrome浏览器、Opera浏览器、Safari浏览器百家争鸣,可苦了我们这些Web前端开发人员了。
我在这里稍微整理了一下前面了解的各浏览器的CSS hack,打包奉献一下,哈哈。
各浏览器CSS hack兼容表:
IE6 | IE7 | IE8 | Firefox | Chrome | Safari | |
!important | Y | Y | ||||
_ | Y | |||||
* | Y | Y | ||||
*+ | Y | |||||
\9 | Y | Y | Y | |||
\0 | Y | |||||
nth-of-type(1) | Y | Y |
#test{
color:red;
color:red !important;
_color:red;
*color:red;
*+color:red;
color:red\9;
color:red\0;
}
body:nth-of-type(1)p{color:red;}
补充说明下 这段代码火狐也认得
谷歌支持采用这段比较好
@mediascreen and (-webkit-min-device-pixel-ratio:0){#test{
color:red;
}}
其他说明:
1、如果你的页面对IE7兼容没有问题,又不想大量修改现有代码,同时又能在IE8中正常使用,微软声称,开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题,此代码如下:
2、body:nth-of-type(1) 如果这样写,表示全局查找body,将会对应第一个
。
3、还有其他写法,比如:
*html #test{}或者 *+html #test{}
4、*+html 对IE7的hack 必须保证HTML顶部有如下声明:
http://www.w3.org/TR/html4/loose.dtd
5、顺序:Firefox、IE8、IE7、IE6依次排列。
小知识:什么是CSS hack?
由于不同的浏览器,比如IE6、IE7、IE8、Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。
这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack,也叫写CSS hack。
心星语林2013-01-16 17:10:09 [举报]
以下实际网页运用 贴上来分享大家参考下
#test{
width:400px;/*Firefox*/
_width:400px;/*IE6*/
*+width:375px; /*IE7*/
width:375px\0;/*IE8*/
width:375px\9\0;/*IE9*/
}
/*body:nth-of-type(1) #test{
width:375px;
}*/
@media screen and (-webkit-min-device-pixel-ratio:0) { #test{
width:375px; /*Chrome*/
} }
原文链接:http://blog.sina.com.cn/s/blog_a30e29fc0101auu4.html
相关文章推荐
- 设为首页加入收藏兼容360/火狐/谷歌/IE/搜狗/猎狐/Safari/等主流浏览器的代码
- 兼容IE、火狐、谷歌及所有浏览器的悬浮代码
- 设为首页加入收藏兼容360/火狐/谷歌/IE/搜狗/猎狐/Safari/等主流浏览器的代码
- 设为首页,加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
- 设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码 详细出处参考:http://www.jb51.net/article/35063.htm
- 兼容IE、火狐、谷歌及所有浏览器的悬浮代码
- 设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
- 加入收藏、设为首页代码,兼容360/火狐/谷歌/IE等主流浏览器
- 在网页中插入FLV视频,经测试兼容IE、火狐、谷歌等浏览器
- 如何让点聚WebOffice在线编辑ActiveX插件兼容火狐、谷歌、IE各式浏览器
- 网页中播放Mp3(兼容火狐,谷歌,ie主要浏览器)
- 浏览器本地预览图片并Ajax上传到服务器(谷歌火狐 ,IE不兼容)
- javascript JS 实现打印页面功能 支持多浏览器,兼容IE,火狐,谷歌
- 把网页变成黑白(兼容谷歌、火狐、IE等浏览器)
- 如何让点聚WebOffice在线编辑ActiveX插件兼容火狐、谷歌、IE各式浏览器
- 一个能够兼容IE6,IE8,IE9,IE10,IE11,谷歌,火狐,360等常见的10个浏览器的HTML头部信息配置代码
- js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
- (亲测兼容360、IE、谷歌、火狐等浏览器)鼠标悬停显示页面被截取字段的全部内容
- C++获取浏览器浏览历史(兼容谷歌、IE、火狐)