csshack（csshack原理）

本篇文章给大家谈谈csshack，以及csshack原理对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、css里面怎么用hack清楚浮动
• 2、有懂CSS hack的吗 我这么兼容IE8 IE9 IE10怎么不行啊
• 3、none !important是什么意思？
• 4、CSS样式兼容Hack
• 5、关于CSS hack的写法
• 6、css hack方式有哪些

css里面怎么用hack清楚浮动

1、子任用的最多的一种 clearfix hack

view sourceprint

01..clearfix:after{

02.display:block;

03.clear:both;

04.height:0;

05.line-height:0;

06.visibility:hidden;

07.content:".";

08.font-size:0;

09.}

10..clearfix{

11.zoom:1;

12.}

2、比较常见的另一种 clearfix hack

view sourceprint

01..clearfix:after {

02.content: ".";

03.display: block;

04.clear: both;

05.visibility: hidden;

06.line-height: 0;

07.height: 0;

08.}

09..clearfix {

10.display: inline-block;

11.}

12.html[xmlns] .clearfix {

13.display: block;

14.}

15.* html .clearfix {

16.height: 1%;

17.}

最近比较火的一种 clearfix hack

作者博客：A new micro clearfix hack

view sourceprint

01..cf:before,

02..cf:after {

03.content: " "型伏旅;

04.display: table;

05.}

06..cf:after {

07.clear: both;

08.}

09..cf {

10.*zoom: 1;

11.}

其他两种方法 clearfix hack

摘自：XHTML float clear without markup test

.clearfix with IE8

view sourceprint

01./* full clearfix */

02./* add to floating elements which shall clear floating after themselves */

03.* html .clearfix {

04.height: 1%; /* IE5-6 */

05.}

06.*+html .clearfix {

07.display: inline-block; /卜凳* IE7not8 */

08.}

09..clearfix:after { /* FF, IE8, O, S, etc. */

10.content: ".";

11.display: block;

12.height: 0;

13.clear: both;

14.visibility: hidden;

15.}

已测试版本厅氏:

FF3.6, 3.5, 3, 2.0.0.16, 1.5, Camino

IE9PR3, 8, 7, 6, 5.5, 5.01, IE5Mac

Opera 9.51, 9.27, 8.5

Chrome 5

Safari 3.1.1 (PC, should work on Mac too)

[img]

有懂CSS hack的吗 我这么兼容IE8 IE9 IE10怎么不行啊

margin-top:9px;margin-top:8px\0;margin-top:9px\9\0;这三句ie8都能识别出来，根据顺序，组后的悄虚茄那个优先级最高，所以IE8下还是9px；

\9 ：IE6、IE7、IE8都能识别

\0 ：仅IE8识别

* ：IE6、IE7能识别

*+ ：仅IE7能识别

_ ：仅IE6能识别

IE9、IE10未测试暂时不知道

写誉嫌这些hack的时候启察要注意顺序。

none !important是什么意思？

none !important表示使outline属性无效，使绘制绝并于元素周围的一条线无效。

outline属性包括：outline-color、outline-style、outline-width：

outline-color ：设纳宏枝置元素洞敏轮廓的颜色，其取值与border-color类似。只有当outline-style不为none时才有效。默认为transparent。

outline-style ：设置元素轮廓的格式，其取值与border-style类似，但没有hidden值。默认为none，无轮廓。

扩展资料：

outline-style 属性用于设置元素的整个轮廓的样式。样式不能是 none，否则轮廓不会出现。

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。outline 属性设置元素周围的轮廓线。

注释：请始终在 outline-color 属性之前声明 outline-style 属性。元素只有获得轮廓以后才能改变其轮廓的颜色。注释：轮廓线不会占据空间，也不一定是矩形。默认值： none

CSS样式兼容Hack

你在肆指猜div id="裂型dvTotal"的CSS中逗旁加zoom:1试试，当遇到解释不了问题的时候就试试这个属性

关于CSS hack的写法

！important 是除IE6.0以外弯冲的主流浏览器都可以识别，是写在CSS属性里的。

*号只有IE7，IE6或更早的IE浏览器可以识别，可以写在CSS属性里或者选择符上。

+号也是选择符hack,比老御如 * +html p {} ，只有IE7可以侍闹岩识别。

_下划线是属性级hack，只有IE6识别 比如 p {width:100px; _width:200px;},ie6会选择200px;其它浏览器会选择100px

css hack方式有哪些

what

由于不同厂商的浏览器或某浏览器的不同版本（IE6~IE11，Firefox/Safari/Opera/Chrome等），对css的支持、纳备指解析不一样。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同的版本写特定的css样式，把这个针对不同浏览器/不同版本写相应的css code的过程叫做css hack。

how

由于不同的浏览器和浏览器的各版本对css的支持及解析结果不一样，以及css优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景应用不同的css。

css hack 分类

有三种表现形式，css属性前缀法，选择器前缀法，以及IE条件注释法。

属性前缀法（即类内部hack）

选择器前缀法

IE条件注释法

css hack一般是将适用范围广，被识别能力强的css定义在前面。

css hack方式一：条件注释法（适用于IE10以下，IE10以后不再支持条件注释）

gt：greater than，选择条件版本以上版本，不包含条件版本。

lt： less than ，选择条件版本以下版本，不包含条件版本。

gte：greater than or equal ，选择条件版本以上版本，包含条件版本。

lte：less than or equal ，选择条件版本以下版本，包含条件版本。

！：选择条件版本以外所有版本，无论高低。

条件注释属性：

实例

非IE

html脚本中平常的注释方法，条件注释法只有IE10以下的IE浏览器可以识别，对于别的浏览器那么就只能看见的是一对封闭的不起作用的注释。对于非IE 的注释，注意里面有一个是起到封闭注释的作用。

css hack方式二：类内属性前缀洞配法

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

以下讨论的是标准模式中的hack方法

规则

*color：IE5.5、6、7

+color : IE5.5、6、7

＃color : IE5.5、6、7

-color：IE5.5、6

＿color: IE5.5、6

这几个当中，我喜欢用＊与 ＿

color\0 : IE8、9、10、11（12以上没测）（此处有些地方说欧朋也识别，可是我测试啦，不管用，不知道啊）

color\9 : IE6、7、8、9、10（11不支持）

color\9\0:IE8、9、10（其他不支持）

\9\0取了共集

color:red!important;提高该设置的优先级

css hack方式三：选择器前缀法

规则

@media screen\9{……}（只对IE6、7生效）

@media \0screen{……}（只对IE8生效）

@media \0screen\,screen\9{……}（对IE6,7,8生效）

@media screen\0{……}（只对IE8、9、10生效）

@media screen and (min-width:0\0){……}（只对IE9，10有效）

@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){……}（对IE10,11有效，以上没测）

hack 利弊

尽量避免使用css hack，但有些情况下，为了顾及用户体验实现向下兼容，不得已才使用hack。但过多使用会造成html文档混乱不堪，增加管理和维护的负担。

关于csshack和csshack原理的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。