首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >【说站】css中hack的3种表现形式

【说站】css中hack的3种表现形式

作者头像
很酷的站长
发布于 2022-11-24 16:36:50
发布于 2022-11-24 16:36:50
1.2K0
举报

css中hack的3种表现形式

1、条件注释法。是IE浏览器专有的Hack模式。

微软官方推荐hack模式。

只在IE下生效。

代码语言:javascript
复制
<!--[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前缀。

只有特定浏览器才能识别,以达到预期的页面显示效果。

代码语言:javascript
复制
/* CSS属性级Hack */
color:red; /* 所有浏览器可识别*/
_color:red; /* 仅IE6 识别 */
*color:red; /* IE6、IE7 识别 */
+color:red; /* IE6、IE7 识别 */
*+color:red; /* IE6、IE7 识别 */
[color:red; /* IE6、IE7 识别 */
color:red9; /* IE6、IE7、IE8、IE9 识别 */
color:red; /* IE8、IE9 识别*/
color:red!important; /* IE6 不识别!important*/

3、选择器前缀法,针对某些页面表现不一致或需要特殊处理的浏览器。

在CSS选择器之前,添加一些只有特定浏览器才能识别的前缀。

代码语言:javascript
复制
/* CSS选择符级Hack */
*html #demo { color:red;} /* 仅IE6 识别 */
*+html #demo { color:red;} /* 仅IE7 识别 */
:root #demo { color:red9; } : /* 仅IE9识别 */
body:nth-of-type(1) #demo { color:red;} /* IE9+、FF3.5+、Chrome、Safari、Opera 可以识别 */
head:first-child+body #demo { color:red; } /* IE7+、FF、Chrome、Safari、Opera 可以识别 */

以上就是css中hack的3种表现形式,希望对大家有所帮助。更多css学习指路:css教程

本文教程操作环境:windows7系统、css3版,DELL G3电脑。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
目录
  • css中hack的3种表现形式
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档