hack

最新推荐文章于 2024-01-16 15:09:49 发布
damon08708
最新推荐文章于 2024-01-16 15:09:49 发布
阅读量788
点赞数
分类专栏： CSS 文章标签： ie mozilla 浏览器 layout safari firefox
CSS 专栏收录该内容
48 篇文章 0 订阅
订阅专栏
CSS hacks

一、
“标准兼容的浏览器”是指能够理解和支持HTML和XHTML,Cascading Style Sheet(CSS)，ECMAScript，W3C Document Object Model(DOM)标准的浏览器。
浏览器=={古老的IE5.x|讨厌的IE6|里程碑IE7|新一代IE4|开发利刃FireFox|华丽的Oprea|异军Safari|Netscape}

各种常见浏览器使用的内核 (Rendering Engine)
Mozilla Firefox ( Gecko )
Internet Explorer ( Trident )
Opera ( Presto )
Konqueror ( KHTML )
Safari ( WebKit )
Google Chrome ( WebKit )

二、
浏览器多模式(document.compatMode)
Standards Mode（标准模式或Strict Mode）
Quirks mode（怪异模式或兼容模式Compatibility Mode）-- document.compatMode=="BackCompat"


三、
Hack
Hack不是解决浏览器兼容的利器，而是在无奈时候耍的小手段。
因为不同浏览器对W3C标准的支持不一样，各个浏览器对于页面的解释呈视也不尽相同，比如IE在很多情况下就与FF存在3px的差距，对于这些差异性，就需要利用css 的hack来进行调整，当然在没有必要的情况下，最好不要写hack来进行调整，避免因为hack而导致页面出现问题。


四、Hack之道
(标准设置-通用设置-特殊设置)
CSS hack书写顺序一般为 普通浏览器<FF<IE7<IE6

1.过滤浏览器
IE6:
* html selector{sRule}

IE7:
*+html selector{sRule}

针对(IE7/FF)起作用,在css的前面加 [xmlns]: 
[xmlns] selector{sRule}

Mozalla:
*:lang(zh) selector{sRule}
@-moz-document url-prefix() {selector{sRule}}

safari:
selector:empty {sRule}

/* 针对Google Chrome、Safari 3.0、Opera 9 的CSS样式 */
@media all and (min-width: 0px){
selector {sRule} 
}

特殊的IE注释代码
作为IE的IF条件注释使用备忘，有些时候试用if IE而不是在css中使用hack，就能通过w3c验证。

<!--[if IE]>所有的IE可识别<![endif]-->
<!--[if IE 5.0]>只有IE5.0可以识别<![endif]-->
<!--[if IE 5]>仅IE5.0与IE5.5可以识别<![endif]-->
<!--[if gt IE 5.0]>IE5.0以及IE5.0以上版本都可以识别<![endif]-->
<!--[if IE 6]>仅IE6可识别 <![endif]-->
<!--[if lt IE 6]>IE6以及IE6以下版本可识别<![endif]-->
<!--[if gte IE 6]>IE6以及IE6以上版本可识别<![endif]-->
<!--[if IE 7]>仅IE7可识别 <![endif]-->
<!--[if lt IE 7]>IE7以及IE7以下版本可识别<![endif]-->
<!--[if gte IE 7]>IE7以及IE7以上版本可识别<![endif]-->
<![if!IE]>非IE浏览器<![endif]>


2.破坏属性
仅IE5不识别
selector/*IE5不识别*/ { display:none;}
这一句是在上一句中去掉了属性区的注释。只有IE5不识别

仅IE6不识别
selector { display /*IE6不识别*/:none;}
这里主要是通过CSS注释分开一个属性与值，流释在冒号前。

仅IE6与IE5不识别
selector/**/ { display /*IE6,IE5不识别*/:none;}
这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。

IE:(*)
IE6:(*,_)
IE7:(*,!important)
Mozilla:(!important)
标准兼容的其他浏览器:(标准属性,!important)



五、hasLayout
微软专有属性(hasLayout)
IE座右铭:给我一个Layout,我将发挥无限的可能。

hasLayout=[-1|0]
1.layout元素会自动调整高和宽以包含浮动元素，闭合浮动元素.
2.浮动元素旁边的元素。注：相对定位一个元素时最好给予其 layout
3.元素的盒子属性恢复正常。

以下元素自动具备layout:
<html>, <body> 
<table>, <tr>, <th>, <td> 
<img> 
<hr> 
<input>,<button>,<select>, <textarea>, <fieldset>, <legend> 
<iframe>, <embed>, <object>, <applet> 
<marquee> 

以下属性会触发layout=true;
position: absolute,fix
float: left|right 
display: inline-block 
width: any value other than 'auto' 
height: any value other than 'auto' 
zoom: any value other than 'normal' 
writing-mode: tb-rl 

在IE7 中 overflow 也会使得layout=true:
overflow: hidden|scroll|auto 
overflow-x|-y: hidden|scroll|auto
min-width
min-height
max-width
max-height

以下属性会清除layout=false;
position:static;
float:none; 
width:auto;
height:auto; 
zoom:normal; 



三、常见的Hack解决，其他兼容技巧
1、IE6Bug集合
a、IE6双倍边距BUG
DIV在使用浮动属性float时,设定其左外补丁(margin-left),在IE6下第一个浮动的元素就会出现双倍于设定的左外补丁值的BUG.
解决方法是在第一个浮动的元素中加入display属性并将其值设为inline,既将对象强制作为内联对象呈递---display:inline;
selector{float:left;display:inline;}

b、IE6不支持透明PNG图片
你可能需要用一个重写的CSS的滤镜来解决这个问题：
.pngBg { background:transparent url(/images/test.png) no-repeat scroll center top; _background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=corp, src='/images/test.png');
}

c、IE6下块对象默认的3PX现象
当一个浮动元素后面跟着文本或者只是一个普通的容器时候，浮动元素会于文本产生3px的间距.
解决的方法是针对于IE6，对浮动元素加上.float3px{margin-right:0px!important;margin-right:-3px;!important}
这个标记IE7和firefox是支持的，而我们伟大的IE6却视而不见，我们就可以根据这个特点，让左div针对IE6有一个-3px的右margin,而IE7和firefox为0。

d、消失的margin-bottom:
浮动元素margin-bottom会消失,即使触发了Layout，但也不能在IE6上完整的闭合浮动元素，需要添加清除浮动元素的标签来清除浮动。

e、多出来的一只猪，Duplicate Caharacters Bug.
当多个浮动元素相邻，中间加注释的时候，在IE6中最后一个浮动元素内的文本可能会复制到最下面去。
在IE6中注释会给当成文本一样存在，但是不会显示，所以促发了IE6的3PX现象，多出来3px。
<div class="wrapper">
     <div class="rightW">|这就是</div>
     <!--aaaa-->
     <div class="rightW">多出来的那只猪</div>
</div>

2.text-overflow:
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾，很好的一个技术。只是目前Firefox并不支持。
3.内联块级元素
display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。
旁边的内联对象会被呈递在同一行内，允许空格,可以设置宽度和高度地块元素的盒子属性
并不是所有浏览器都支持此属性，目前支持的浏览器有:Opera、Safari
在IE中对内联元素使用display:inline-block,IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表症。
从上面的这个分析，也不难理解为什么IE下，对块元素设置display:inline-block属性无法实现inline-block的效果。
这时块元素仅仅是被display:inline-block触发了layout，而它本就是行布局，所以触发后，块元素依然还是行布局，而不会如Opera中块元素呈递为内联对象。
IE下块元素如何实现display:inline-block的效果？
有两种方法：
a、先使用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（两个display要先后放在两个CSS声明中才有效果，这是IE的一个经典bug，如果先定义了display:inline-block，然后再将display设回inline或block，layout不会消失）。
b、直接让块元素设置为内联对象呈递（设置属性display:inline），然后触发块元素的layout（如：zoom:1等）。

selector {display:inline; zoom:1;display:inline-block;}

4、万能 float 闭合
当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的HACK来对父级做一次定义，那么就可以解决这个问题。
将以下代码加入Global CSS 中,给需要闭合的div加上 class="fixfloat" 即可,屡试不爽.
.fixfloat {zoom:1; _height:1px; }
.fixfloat:after { content:".";clear:both;display:block;visibility:hidden; height:0; line-height:0px; font-size:0px; }

5.将重要元素放置在屏幕中央 
div.popup { height:400px; width:500px; position: absolute; top: 50%; left: 50%;}      
div.popup { margin-top: -200px; margin-left: -250px;}  
div.popup { height:400px; width:500px; position: absolute; top: 50%; left: 50%;}   
div.popup { margin-top: -200px; margin-left: -250px;}

6、
position:fixed;相对html定位;IE6不支持
position:absolute;相对body定位;
position:relative;相对父标签定位;


7.跨浏览器实现position:fixed;
html{height:100%;overflow:hidden;}
body{height:100%;overflow:auto;margin:0; padding:0;}/*显示的滚动条属于body*/
.fiexd{ position:fixed;_position:absolute;width:300px; height:60px;top:50%; left:50%; margin-top:-30px; margin-left:-150px;background-color:#00ccff;}



8、html,body没有高度
要让body中的层实现100%;
设置html,body{width:100%;height:100%;}
9、cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以
10、IE6/IE7 div等块对象默认具有高度
11.切记空白层加上overflow:hidden;兼容IE6性
IE6定了width和height后，层会自适应高度和宽度
IE7和Mozilla定了width和height后，层不会自适应高度和宽度，溢出部分显示
解决方案：
IE6定width,和height,overflow:visible;
IE7和Mozilla
定义(min-width或min-height)||(max-width或max-height)overflow:visible;

12、width、height、overflow、margin-top、margin-bottom对内联元素完全不起作用。  


13、display:
1.none:元素不会被显示
2.block:块状元素,设置了float的元素都是块状元素
3.inline：内联元素
4.inline-block:内联块状元素
5.table-cell:此元素会作为一个表格单元格显示(IE不支持|Mozilla支持)

14、visibility:visible|hide

15、vertical-align:middle
1.设置表格的单元格中的内容垂直居中。
2.设置同一行的按钮当高度不同的时候垂直方向的定位。
3.设置文本垂直方向的定位。

16、当列表li里面有浮动元素时，ie中显示底部多出4px问题的提出和解决..
*margin-bottom:-4px;