css hank

最新推荐文章于 2021-06-03 19:19:59 发布

前端-文龙刚

最新推荐文章于 2021-06-03 19:19:59 发布

阅读量223

点赞数

文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/qq_17211063/article/details/84745333

版权

#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支持 */
}
#menu { line-height: 26px\9; }/*ie6,ie7,ie8 这句定义主要尖对IE8来hack*/
body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持 */

.hank{
color:#000;/*ff浏览器*/
[;color:#f00;];/*chrome*/
color:#0f0\0;/*ie8*/
*color:#00f;/*ie7，腾讯TT*/
_color:#ff0;/*ie6*/
}
:root .hank{color:#0ff\0;}/*ie 9*/
[;margin-left:100px;];/*chrome，safari,遨游，ie7，腾讯TT,ie6*/
color:red; /* 所有浏览器都支持 */

color:red !important; /* 除IE6外 */

_color:red; /* IE6支持 */

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

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

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

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

color:red\; /* 针对所有IE */

color:red\0; /* IE8、IE9支持 */

color:red\9\0; /*IE9支持*/

:root .test { color:red\0; } /*IE9支持*/

/* webkit and opera */

@media all and (min-width: 0px){ div{color:red;} }

/* webkit */

@media screen and (-webkit-min-device-pixel-ratio:0){ div{color:red;} }

/* opera */

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { div{color:red;} }

/* firefox * /

@-moz-document url-prefix(){ div{color:red;} } /* all firefox */

html>/**/body div, x:-moz-any-link, x:default {color:red;} /* newest firefox */

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









 <html> 

<!-[if IE 7]> = 等于 IE7

<!-[if lt IE 8]> = 小于 IE8（就是 IE7 或以下了啦）

<!-[if gte IE 8]> = 大于或等于 IE8

<meta http-equiv="x-ua-compatible" content="ie=7" />

把这段代码放到<head>里面，在ie8里面的页面解析起来就跟ie7一模一样的了

<!-[if IE]>

<link rel="stylesheet" href="/ie-all.css" type="text/css" media="screen" />

<![endif]->

<!-[if lt IE 8]>

<link rel="stylesheet" href="/ie.css" type="text/css" media="screen" />

<![endif]->

<!-[if IE 7]>

<link rel="stylesheet" href="/ie7.css" type="text/css" media="screen" />

<![endif]->

<!-[if IE 6]>

<link rel="stylesheet" href="/ie6.css" type="text/css" media="screen" />

<![endif]->

chrome和safari（因为他们都是Webkit内核的浏览器）:
@media screen and (-webkit-min-device-pixel-ratio:0) { Selector { property: value; } }

Google Chrome 和 Safari浏览器：
@media screen and (-webkit-min-device-pixel-ratio:0) { .demo { color: #f36; } }

firefox：
@-moz-document url-prefix() { .selector { property: value; } }或者@-moz-document url-prefix() { .demo { color:lime; } }
/* 支持所有firefox版本 */
#selector[id=selector] { property: value; }
或者：
@-moz-document url-prefix() { .selector { property: value; } }

/* 支持所有Gecko内核的浏览器 (包括Firefox) */
*>.selector { property: value; }

opera浏览器：
html:first-child>body Selector {property:value;}
或者：
@media all and (min-width:0) { Selector {property: value;} }
或者：
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body Selector { property: value; } }
示例：
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body .demo { background: green; } }
设置苹果浏览器
input[type=button], input[type=submit], input[type=file], button { cursor: pointer; -webkit-appearance: none; }
-------------------------------------------------------
专门解决苹果手机输入框的圆角问题
input{-webkit-appearance: none;
border-radius: 0;}
-------------------------------------------------------
@media all and (min-width: 0px){
/* Safari与Opera浏览器的共同样式 */
}
@media all and (-webkit-min-device-pixel-ratio:0){
/* 这里单独设置Safari的样式 */
}
-------------------------------------------------------
/*针对谷歌浏览器内核支持的CSS样式*/

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

样式

}
-------------------------------------------------------
<meta http-equiv="X-UA-Compatible" content="IE=8" />
这段代码表示开启IE8的标准渲染模式。但是不考虑<!DOCTYPE>指令。
------------------------------------------------------------------------------------
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
这段代码表示标准模式显示，同时使用<!DOCTYPE>指令确定如何呈现内容。一般我们首选这种兼容性模式。
------------------------------------------------------------------------------------
所以我们如果在网页中加上了代码 <meta http-equiv="X-UA-Compatible" content="IE=8" /> 或者 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />，那么就设定要用IE8标准模式渲染网页，而不会使用兼容的模式
------------------------------------------------------------------------------------
如果我的页面只是在IE7或者IE8的兼容模式才浏览正常怎么办呢？我如何设置必须在IE8的兼容模式渲染网页呢？
那么就加上下面这段代码好喽~~~
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
------------------------------------------------------------------------------------
第二种是使用IE专用的条件注释

<link rel="stylesheet" type="text/css" href="css.css" />


<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->


<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
------------------------------------------------------------------------------------
@-moz-document url-prefix() {这里面写你的样式} 火狐浏览器的解决方式

或者（慢慢调试）
@-moz-document url-prefix() {

.font1 {color:red}

}
------------------------------------------------------------------------------------
只需要在页面中加入如下http meta-tag:<meta http-equiv="x-ua-compatible" content="ie=emulateie7" /> 只要ie8读到这个标签，它就会自动启动ie7兼容模式，保证页面完整展示
------------------------------------------------------------------------------------
使IE5,IE6兼容到IE7模式（推荐）

------------------------------------------------------------------------------------
使IE5,IE6,IE7兼容到IE8模式

------------------------------------------------------------------------------------
使IE5,IE6,IE7,IE8兼容到IE9模式