css hack书写

时间 2019-12-01

标签 css hack 书写栏目 CSS 繁體版

原文原文链接

不一样的浏览器，好比Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析不同，所以会致使生成的页面效果不同，得不到咱们所须要的页面效果。css

为了解决浏览器兼容性,咱们就须要针对不一样的浏览器去写不一样的CSS，让它可以同时兼容不一样的浏览器，能在不一样的浏览器中也能获得咱们想要的页面效果。这个针对不一样的浏览器写不一样的CSS code的过程，就叫CSS hack,也叫写CSS hack。html

因为不一样的浏览器对CSS的支持及解析结果不同，还因为CSS中的优先级的关系。咱们就能够根据这个来针对不一样的浏览器来写不一样的CSS。express

好比 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox两个都不能认识。等等浏览器

书写顺序，通常是将识别能力强的浏览器的CSS写在后面。下面列举经常使用的CSS hack方法app

CSS书写技巧-1：!importantide

!important做用是提升指定样式规则的应用优先权。 IE7以及全部标准浏览器能识别!important 区别IE6与IE7与其余浏览器firefox

.browserTest { border:20pxsolid#60A179!important; border:20pxsolid#00F; }设计

在Mozilla中或者IE7浏览时候，可以理解!important的优先级，所以显示#60A179的颜色。在IE6中浏览时候，不可以理解!important的优先级，所以显示#00F的颜色。code

CSS书写技巧-2：*htm

IE都能识别*；标准浏览器(如火狐)不能识别*。区别IE6与火狐

.browserTest { border:20pxsolid#60A179; *border:20pxsolid#00F; } 区别IE7与火狐

.browserTest { border:20pxsolid#60A179; *border:20pxsolid#00F; } 区别IE7，IE6与火狐

.browserTest { border:20pxsolid#60A179; *border:20pxsolid#00F!important; *border:20pxsolid###; }

CSS书写技巧-3：_

IE6支持下划线，IE7和firefox均不支持下划线

区别IE7，IE6与火狐

.browserTest { border:20pxsolid#60A179; *border:20pxsolid#00F; _border:20pxsolid###; } 不论是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面

CSS书写技巧-4：*+html 与 *html

*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签

.browserTest{width:120px;}/*FireFoxfixed*/ *html.browserTest{width:80px;}/*ie6fixed*/ *+html.browserTest{width:60px;}/*ie7fixed*/ 注意:

*+html 对IE7的HACK 必须保证HTML顶部有以下声明：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

如下是一些经常使用的CSS兼容技巧

1)火狐下给div设置padding后会致使width和height 增长, 但IE不会.(可用!important解决)

2)垂直居中，将 line-height设置为当前div相同的高度, 再经过vertical-align: middle；( 注意内容不要换行)

3)水平居中，margin:0 auto;(固然不是万能)

4)若需给a标签内内容加上样式, 须要设置 display: block;(常见于导航标签)

5)浮动IE产生的双倍距离

在IE下，当一个div设置了float后，而后给他设置margin，就会出现加倍的margin，解决的办法是给div设置display:inline。 <divid=”float”></div> 相应的css为 #float { float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/ } Block元素的特色是:老是在新行上开始,高度,宽度,行高,边距均可以控制(块素);inline元素的特色是:和其余元素在同一行上,...不可控制(内嵌元素);

6)IE和FF对盒模型的解释区别

#browserTest{width:650px!important;width:648px;padding-left:2px;background:#fff;} browserTest显示的宽度是650px；

IE Box的总宽度是:width+padding+border+margin宽度总和；

FF Box的总宽度就是:width的宽度，padding+border+margin的宽度在含在width内。

若是有box{width:"300px"; padding:"5px";}

则box在IE的宽度应该为:310px;而在FF的宽度则是300px;因此在box有填充的状况下应该这样使用box{width:"300px" !important;width:"290px";}

7)ul标签在FF下面默认有list-style和padding, 最好事先声明, 以免没必要要的麻烦;(常见于导航标签和内容列表)

8)做为外部wrapper的div不要定死高度, 最好还加上 overflow: hidden;以达到高度自适应;

9)页面的最小宽度min-width是个很是方便的CSS命令，它能够指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当作最小宽度来使。为了让这一命令在IE上也能用，能够把一个<div> 放到 <body> 标签下，而后为div指定一个类：

而后CSS这样设计：

#container{min-width:600px;width:expression(document.body.clientWidth<600?"600px":"auto");} 第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上经过Javascript的判断来实现最小宽度。

CSS书写技巧-10:万能float闭合

将如下代码加入Global CSS 中,给须要闭合的div加上

<style>

/*ClearFix*/

.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

*html.clearfix{ height:1%; }

*+html.clearfix{ height:1%; }

.clearfix { display:inline-block; }

/*HidefromIEMac*/

.clearfix{display:block；} /*EndhidefromIEMac*/ /*endofclearfix*/

#wrap{border:6px #ccc solid;overflow:auto;_height:1%;}

.column_left{float:left;width:20%;padding:10px;}

.column_right{float:right;width:75%;padding:10px;border-left:6px #eee solid;}

</style>

<div class="column_left"> <h1>Floatleft</h1> </div>

<div class="column_right"> <h1>Floatright</h1> </div>

</div>

1. css hack hack
2. IE6~9的css hack写法
3. android 4.4.3 css hack 写法
4. 一些hack css 的写法
5. CSS之CSS hack
6. CSS Hack
7. CSS HACK
8. css hack
9. CSS hack
10. css HACK
更多相关文章...
• Eclipse 添加书签 - Eclipse 教程
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• 使用阿里云OSS+CDN部署前端页面与加速静态资源
• 适用于PHP初学者的学习线路和建议