文档章节

针对不同浏览器内核css写法

Adam-Lee
 Adam-Lee
发布于 2011/12/27 19:58
字数 510
阅读 431
收藏 6

/*针对谷歌浏览器内核支持的CSS样式*/

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

样式

} 

/*针对IE6特制识别的CSS样式*/

*HTML .SearchBox

{

样式

}

/*针对IE7特制识别的CSS样式*/

*+HTML .SearchBox

{

样式

}

针对Firefox浏览器的内核CSS写法:

@-moz-document url-prefix() {

.font1 {color:red}

}

IE8就是自己来调试了。调试一个浏览器,有不合适的地方可以在该内核css中重写对应的方法,只需把不合适的样式重写即可实现。*HTML中则例外,需要每重写一个都要加*HTML单独处理。

针对样式名 

如果只让ie6看见用*html .head{color:#000;}

如果只让ie7看见用*+html .head{color:#000;}  (*margin-top:-425px;//ie7专用)

(margin-top:-425px\0;//ie8专用)

如果只让ff看见用:root body .head{color:#000;}

如果只让ffIE8看见用html>/**/body .head{color:#000;}

如果只是不让ie6看见用html>body .head{color:#000;} 即对IE 6无效

如果只是不让ffIE8看见用*body .head{color:#000;}    即对ffIE8无效

针对具体属性

如果只让ie6看见用"_": .head{_color:#000;}

如果只让ie7看见用"+"与"_"结合的方法:     .head{+color:#f00;!;_color:#000;} 

IE8正式版hack

\9″ 例:margin:0px auto\9;.这里的”\9″可以区别所有IE8FireFox.

*IE6IE7可以识别.IE8FireFox不能.

_IE6可以识别”_,IE7IE8FireFox不能.

如:

.a {color:#f00;     color:#f60\9;    +color:#00FF00;    _color:#0000FF; }

从左到右分别对应 FF,IE8 IE7 IE6

=============================

P{+color:#f00;}             支持 IE7 IE6      不支持 FF  IE8b

P{_color:#f00;}             支持ie6          不支持 FF

P{color:#f00; !important;} 

P{color:#f00;}              支持 IE6 IE7 IE8b FF

P{color:#00f !important;color:#f00; } 支持IE7 IE8b FF 不支持IE6

head:first-child+body p{color:#f00;}   支持IE7 IE8b FF      不支持IE6

/*\*//*/

/**/                 支持IE8b         不支持IE6 IE7 FF

html*{color:#f00}        支持IE6 IE7      不支持 IE8b FF

body>p{color:#f00}          支持IE7 IE8b FF      不支持 IE6

html[xmlns] p {color:#f00}      支持 IE7 IE8b FF  不支持 IE6

@import "style.css"

@import "style.css"

@import url(style.css)

@import url('style.css')

@import url("style.css")    支持 IE6 IE7 IE8b FF

P{/*/*color:#f00;/* */}         支持 IE6 IE7  FF 不支持 IE8b

© 著作权归作者所有

Adam-Lee
粉丝 50
博文 118
码字总数 166965
作品 0
深圳
程序员
私信 提问
CSS:关于“-webkit-appearance: none”样式使用问题(转)

问题: 但是后来发现一个问题,微商城的input的checkbox和radio类型在安卓端无法正常显示,但在ios端和pc端可以正常,通过排查发现,原来是在全局css定义样式之后(如上样式)所产生的问题 解决方案...

JackMo2015
2016/11/21
425
0
全面兼容IE6/IE7/IE8/FF的CSS HACK写法

CSS hack由于不同的浏览器,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不...

^6^|^6^
2011/12/06
92
0
给placeholder属性文字设置颜色 兼容性 伪类伪元素

单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。 css伪类:CSS 伪类用于向某些选择器添加特殊的效果。 css伪元素:CSS 伪元素用于向某些选择器设置特殊效果。 伪元素由双冒号和伪元素名称...

书呆子拍皮球
2016/06/17
169
0
前端开发要注意的浏览器兼容性问题整理

首先,我们要知道,为什么各浏览器会产生兼容性问题? 产生这个问题的主要原因是市面上的浏览器的种类很多,但由于不同的浏览器的内核不一致,从而导致各个浏览器对网页的解析就产生了差异。...

菜鸟的进阶
2017/10/21
16
0
关于浏览器的兼容问题

关于浏览器的兼容问题 1. 什么是 CSS hack 根据百度的简述:CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如...

熊蛋子17
2017/11/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

【2019年8月版本】OCP 071认证考试最新版本的考试原题-第5题

choose the best answer The CUSTOMERS table has a CUST_LAST_NAME column of data type VARCHAR2. The table has two rows whose COST_LAST_MANE values are Anderson and Ausson. Which q......

oschina_5359
26分钟前
3
0
电脑怎样制作流程图?分享绘制流程图方法

流程图的绘制可以用很多方法来实现,小编经常使用电脑对流程图进行绘制,即简单又便利,相信很多朋友都因为不知道怎样绘制流程图而选择了放弃,今天这篇文章希望可以让大家重拾绘制流程图的信...

干货趣分享
28分钟前
2
0
Elasticsearch 7.x 之文档、索引和 REST API 【基础入门篇】

前几天写过一篇《Elasticsearch 7.x 最详细安装及配置》,今天继续最新版基础入门内容。这一篇简单总结了 Elasticsearch 7.x 之文档、索引和 REST API。 什么是文档 文档Unique ID 文档元数据...

泥瓦匠BYSocket
32分钟前
2
0
TL665x-EasyEVM开发板处理器、flash、RAM

TL665x-EasyEVM是广州创龙基于SOM-TL665x核心板研发的一款TI C66x多核定点/浮点高性能DSP开发板,采用核心板+底板方式,底板尺寸为200mm*106.65mm,采用4*50pin和1*80pin B2B工业级连接器,稳...

Tronlong创龙
36分钟前
2
0
DevExpress Report-XRTable绑定数据

将从跳转前的页面(A)中获取传入的数据(dtOrd、BatchID、ModelID),绑定到Report报表对应的控件 ,代码如下: this.xrtBatchID.Text = sBatchID; this.xrtModel.Text ...

_Somuns
37分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部