hack
来源：互联网 发布：搜狗输入法 ubuntu 编辑：程序博客网 时间：2024/05/16 15:23
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"三、HackHack不是解决浏览器兼容的利器，而是在无奈时候耍的小手段。因为不同浏览器对W3C标准的支持不一样，各个浏览器对于页面的解释呈视也不尽相同，比如IE在很多情况下就与FF存在3px的差距，对于这些差异性，就需要利用css 的hack来进行调整，当然在没有必要的情况下，最好不要写hack来进行调整，避免因为hack而导致页面出现问题。四、Hack之道(标准设置-通用设置-特殊设置)CSS hack书写顺序一般为 普通浏览器<FF<IE7<IE61.过滤浏览器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.浮动元素旁边的元素。注：相对定位一个元素时最好给予其 layout3.元素的盒子属性恢复正常。以下元素自动具备layout:<html>, <body> <table>, <tr>, <th>, <td> <img> <hr> <input>,<button>,<select>, <textarea>, <fieldset>, <legend> <iframe>, <embed>, <object>, <applet> <marquee> 以下属性会触发layout=true;position: absolute,fixfloat: 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|automin-widthmin-heightmax-widthmax-height以下属性会清除layout=false;position:static;float:none; width:auto;height:auto; zoom:normal; 三、常见的Hack解决，其他兼容技巧1、IE6Bug集合a、IE6双倍边距BUGDIV在使用浮动属性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|hide15、vertical-align:middle1.设置表格的单元格中的内容垂直居中。2.设置同一行的按钮当高度不同的时候垂直方向的定位。3.设置文本垂直方向的定位。16、当列表li里面有浮动元素时，ie中显示底部多出4px问题的提出和解决..*margin-bottom:-4px;
