什么是css hack（css中：line-height:25px\9 这个斜杠是什么意思）

本文目录

• css中：line-height:25px\9 这个斜杠是什么意思
• css样式中，+号什么意思，比如padding-top:10px;+padding-top:6px;
• 什么是Css Hackie6，7，8的Hack分别是什么
• css中在display前面加下划线是什么作用!
• 网页在css标签后面加[id]是怎么回事
• bootstrap.css.map 这个文件是干嘛用的呢

css中：line-height:25px\9 这个斜杠是什么意思

这个是css hack 写法, 主要用在浏览器之间的兼容,
\9:支持IE浏览器
\0:支持IE8浏览器
你可以把属性复制到dreamweaver里面试试 看下IE浏览器下的效果 就明白了

css样式中，+号什么意思，比如padding-top:10px;+padding-top:6px;

这是css hack，由于浏览器对css样式的解析不同造成显示页面不一样，这就需要针对特定浏览器写的样式，只有该浏览器能识别，比如针对ie6可以这样写padding-top:10px; _padding-top:6px;这两个属性ie6都能识别，同时出现只是执行后面的属性，而ie其他版本和憋得浏览器不能识别，还比如针对ie7可以这样写*+html .style {padding-top:6px;}这是写了一个类，可以加给html的任何元素，要详细了解的话比多看看css hack，百度就能找到很多

什么是Css Hackie6，7，8的Hack分别是什么

在我们制作页面时CSS hack由于不同的浏览器，比如Internet Explorer,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
CSS Hack大致有3种表现形式，属性级Hack、选择器Hack以及IE条件Hack
注意：尽可能减少对CSS Hack的使用。
原理：
由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。
IE hack
代码如下:
《!--》
HTML代码块
《!--》

css中在display前面加下划线是什么作用!

“_”是CSS hack 类内属性前缀法中的一种，是IE6专属的hack。下面详细说一下CSS hack。

　　CSS hack由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。

　　简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。

1.原理

　　由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。

　
　CSS Hack大致有3种表现形式，CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack，CSS Hack主要针对类内部Hack：比如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox两个都不能认识。等等

　　选择器Hack：比如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。等等

　　
HTML头部引用(if IE)Hack：

　　针对所有IE：《!----》，

　　针对IE6及以下版本：《!----》

　　这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

　　书写顺序，一般是将识别能力强的浏览器的CSS写在后面。下面如何写里面说得更详细些。

2、常用的CSS hack方式

　　（1）方式一 条件注释法

　　只在IE下生效

　　《!--》

　　这段文字只在IE浏览器显示

　　《!--》

　　只在IE6下生效

　　《!--》

　　这段文字只在IE6浏览器显示

　　《!--》

　　只在IE6以上版本生效

　　《!--》

　　这段文字只在IE6以上(包括)版本IE浏览器显示

　　《!--》

　　只在IE8上不生效

　　《!--》

　　这段文字在非IE8浏览器显示

　　《!--》

　　非IE浏览器生效

　　《!--》

　　这段文字只在非IE浏览器显示

　　《!--》

　　（2）方式二 类内属性前缀法

　　属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果。

　　IE浏览器各版本 CSS hack 对照表

说明：在标准模式中

“-″减号是IE6专有的hack

“\9″ IE6/IE7/IE8/IE9/IE10都生效

“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack

“\9\0″ 只对IE9/IE10生效，是IE9/10的hack

（3）CSS hack方式三：选择器前缀法

选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。

目前最常见的是

*html *前缀只对IE6生效*+html *+前缀只对IE7生效

@media screen\9{...}只对IE6/7生效

@media \0screen {body { background: red; }}只对IE8有效

@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效

@media screen\0 {body { background: green; }} 只对IE8/9/10有效

@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效等等

3、实际应用

比如要分辨IE6和firefox两种浏览器，可以这样写：

div{
background:green;/*forfirefox*/
*background:red;/*forIE6*/(bothIE6&&IE7)
}

我在IE6中看到是红色的，在firefox中看到是绿色的。

　　解释一下：

　　上面的css在firefox中，它是认识不了后面的那个带星号的东西是什么的，于是将它过滤掉，不予理睬，解析得到的结果是:div{background:green},于是理所当然这个div的背景是绿色的。

　　在IE6中呢，它两个background都能识别出来，它解析得到的结果是:div{background:green;*background:red;},于是根据优先级别，处在后面的red的优先级高，于是当然这个div的背景颜色就是红色的了。

网页在css标签后面加[id]是怎么回事

加ID是 CSS的类选择器 他这么写是想兼容各种浏览器，LZ可以去一些网站查看一些相关的 IE浏览器的BUG，就可以学会怎么兼容主流的浏览器了。

bootstrap.css.map 这个文件是干嘛用的呢

这个是source map文件。

因为bootstrap是用less写的，less会编译成css显示在页面上。

但有个麻烦，浏览器里看的都是css第几排，而你的又是less文件，很难对上。

这个时候有了source map，浏览器里直接显示less，非常方便。