css中在display前面加下划线是什么作用!
发布网友
发布时间：2022-04-22 02:55
共8个回答
热心网友
时间：2022-04-21 00:15
“_”是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：<!--[if IE]><!--您的代码--><![endif]-->，
针对IE6及以下版本：<!--[if lt IE 7]><!--您的代码--><![endif]-->
这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。
书写顺序，一般是将识别能力强的浏览器的CSS写在后面。下面如何写里面说得更详细些。
2、常用的CSS hack方式
（1）方式一 条件注释法
只在IE下生效
<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->
只在IE6下生效
<!--[if IE 6]>
这段文字只在IE6浏览器显示
<![endif]-->
只在IE6以上版本生效
<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->
只在IE8上不生效
<!--[if ! IE 8]>
这段文字在非IE8浏览器显示
<![endif]-->
非IE浏览器生效
<!--[if !IE]>
这段文字只在非IE浏览器显示
<![endif]-->
（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的背景颜色就是红色的了。
热心网友
时间：2022-04-21 01:33
.side_col {
float:left; display: inline; margin-left: 20px;
}
而为了适应IE6是：
.side_col {
float: left; margin-left: 20px;
}
* .side_col {
_display:inline; /*hacked for IE 6*/
}
再比如： id="bgcolor" 的控件要在 IE6 中显示蓝色, IE7 中显示绿色, Firefox 等其他浏览器中显示红色. #bgcolor {background:red !important; /* Firefox 等其他浏览器 */background:blue; /* IE6 */}*+html #bgcolor {background:green !important; /* IE7 */}IE6 不认 !important, 也不认 *+html. 所以 IE6 只能是 blue.
IE7 认 !important, 也认 *+html, 优先度: (*+html + !important) > !important > +html. IE7 可以是 red, blue 和 green, 但 green 的优先度最高.
Firefox 和其他浏览器都认 !important. !important 优先, Firefox 可以是 red 和 blue, 但 red 优先度高. 参考：百度百科CSS Hack
热心网友
时间：2022-04-21 03:24
这时给出问题的元素加上display:inline;就可以解决修正这个问题，由于只有ie6有这个错误，所以前面加下划线_display:inline;让ie能识别，其他浏览器忽略。
热心网友
时间：2022-04-21 05:32
所有浏览器 通用 height:100px;
IE6 专用 _height: 100px;
IE7 专用 *+height: 100px;
IE6、IE7 共用 *height:100px;
IE7、FF 共用 height: 100px!important;
例如：
#example { height:100px; } /*FF */
* html #example {height:200px; } /* IE6 */
*+html #example {height:300px; } /* IE7 */
热心网友
时间：2022-04-21 07:57
.a
{
display:none;
_display:inline;
}
这个就表示调用这个样式的元素在IE7.0或者以上的浏览器是不显示的，而在IE6.0中调试时它就会显示！
热心网友
时间：2022-04-21 10:38
热心网友
时间：2022-04-21 13:36
热心网友
时间：2022-04-21 16:51
