网页设计教程与开发
提供各种常见网页效果
提供各种各样的设计教程
装扮QQ，让QQ变得更酷
设计参考，提高自升水平
学习服务器和操作系统
提供各种素材和工具
收藏学习资料
您现在的位置：&&>>&&>>&&>>&&>>&正文
最新区分兼容IE6/IE7/IE8/IE9/FF的CSS&HACK写法
HACK原理:不同浏览器对各中字符的识别不同
在 CSS中常用特殊字符识别表:
(1)*:&&IE6+IE7都能识别*,而标准浏览器FF+IE8是不能识别*的;
(2)!important: 除IE6不能识别&!important外,&&FF+IE8+IE7都能识别!
(3)_&: 除IE6支持_&外,&&FF+IE8+IE7都不支持_;
(4)\9:所有IE浏览器都识别(IE6、IE7、IE8、IE9)
(1)区别FF(IE8)与IE6 IE7
backgorund:&FF和IE8背景色将为橘黄色
*backgorund:&&&IE6和IE7背景色将为红色
(2)区别FF(IE8)与IE6与IE7
background:&&&FF和IE8背景色将为橘黄色
*background:red !&&IE7背景色将为红色
*background:&&&&&IE6背景色将为蓝色
(3)区别FF(IE8)与IE6与IE7
background:&&&&&&&&FF和IE8背景色将为橘黄色
*background:&&&&&&&&&&IE7背景色将为红色
_background:&&&&&&&&&IE6背景色将为蓝色
(4)区别FF与IE6 IE7 IE8 IE9
color:&&&&&& FF等非IE浏览器字体色将为灰色
color:red\9;&&&& IE8 IE9字体色将为红色
*color:&&&& IE7字体色将为绿色
_color:&&&& IE6字体色将为蓝色
提示:CSS HACK书写顺序:先写FF等非IE浏览器所需样式，其次写IE8所需样式，接着是IE7的，再接着才是IE6的！
总结:实际运用中我感觉比较少用到!important ,只要你记住”*”和”_”我想就足够区别于FF(IE8)与IE6与IE7了.
相关链接：
&&&&&&&&&&&&&&&&&&&
转载请注明:破洛洛(谢谢合作)
上一篇文章： 下一篇文章：
网友评论：IE7不兼容问题
[问题点数：100分，结帖人mxin2011]
IE7不兼容问题
[问题点数：100分，结帖人mxin2011]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。还没有 trackbacks【解决】IE6、7中SELECT标签高度的兼容性修复 - 成长脚印-专注于互联网发展
成长脚印-专注于互联网发展
【解决】IE6、7中SELECT标签高度的兼容性修复
(设置select高度为40px时在各浏览器中显示效果)
问题描述：
‘众所周知’，在IE6、7中用height来设定SELECT标签高度是徒劳和无效的。但在IE高版本及FF,chrome等浏览器中是“支持"的。
”支持“为什么要打引号？即使是在支持height的浏览器中，设定后的显示效果竟然也有很大差异。[注：line-height的设定对select标签在各浏览器中也是无效的]
[注：各版本浏览器对select标签宽度width的设定都是有效和一致的，已经过测试]
解决方案：
话说有一个方案可以”很容易“解决IE67的SELECT高度问题：设置font-size大小能直接影响高度。[这个方案也不知谁想出来的，30px的高度得设置字体为20px大小，你傻呀，这种方案要的有啥用，不仅失美观而且还掉水准]
一、如果不用兼容IE6，7的话，直接设置select的padding值即可解决高度问题。以下是select标签在各浏览器中的默认高度，根据默认高度，设置padding为相应值，以使select达到所需高度。
（select默认高度）
二、如果要兼容IE6，7，那就需要使用另一种方案了(select需要被多嵌套两层标签，一层用来遮挡select的默认边框[在IE6、7中设置border:0px也是无效的，高版本可用]，另一层用来模拟”高度改变后的“select边框)：
&style type="text/css"&
.standard_select{ /*边框*/
display:inline-
border:solid 1px #E3E9EF;
border-top-color:#ABADB3;
padding:5 /*调整此处改变select高度*/
.select_shelter{ /*遮挡默认边框*/
display:inline-
.select_shelter select{
*margin:-2
width:100 /*select的宽度*/
&span class="standard_select"&&!--边框--&
&span class="select_shelter"&&!--遮挡默认边框--&
&option value="papername" selected="selected"&SELECT选项标签&/option&
&option value="state"&选项二&/option&
&option value="state"&选项三&/option&
&option value="state"&选项四&/option&
&option value="state"&选项五&/option&
&option value="state"&选项六&/option&
&【参考】：
相关日志：
阅读本文后，您的心情是：
引用地址:/tb.php?sc=0c2768&id=163
职位:研发工程师
阳光与欢乐同在,
日志：151篇
评论：45条
碎语：263条
随机日志 &
最新日志 &
最新评论 &关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一、CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对…一、CSS HACK以下两种方法几乎能解决现今所有HACK.1, !important随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)以下为引用的内容： &style& #wrapper { width: 100px! /* IE7+FF */ width: 80 /* IE6 */ } &/style&2, IE6/IE77对FireFox以下为引用的内容： *+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签. &style& #wrapper { #wrapper { width: 120 } /* FireFox */ *html #wrapper { width: 80} /* ie6 fixed */ *+html #wrapper { width: 60} /* ie7 fixed, 注意顺序 */ } &/style&注意: *+html 对IE7的HACK 必须保证HTML顶部有如下声明：&!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”　”http://www.w3.org/TR/html4/loose.dtd”&二、万能 float 闭合关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup] 将以下代码加入Global CSS 中,给需要闭合的div加上 即可,屡试不爽.以下为引用的内容：&style& /* Clear Fix */.clearfix:after { content:”.”; display: height:0; clear: visibility: } .clearfix { display:inline- } /* Hide from IE Mac */ .clearfix {display:} /* End hide from IE Mac */ /* end of clearfix */ &/style&&三、其他兼容技巧1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决) 2, 居中问题. 1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.) 2).水平居中. margin: 0(当然不是万能) 3, 若需给 a 标签内内容加上 样式, 需要设置 display:(常见于导航标签) 4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题. 5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表) 6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应. 7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.1 针对firefox ie6 ie7的css样式 现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示， 但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针 对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。 现在写一个CSS可以这样：以下为引用的内容： #1 { color: #333; } /* Moz */ * html #1 { color: #666; } /* IE6 */ *+html #1 { color: #999; } /* IE7 */ 那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。2 css布局中的居中问题 主要的样式定义如下：body {TEXT-ALIGN:} #center { MARGIN-RIGHT: MARGIN-LEFT: } 说明： 首先在父级元素定义TEXT-ALIGN:这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。 但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT:MARGIN-LEFT: ” 需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div， 只要在每个拆出的div里定义MARGIN-RIGHT:MARGIN-LEFT: 就可以了。3 盒模型不同解释#box{ width:600 //for ie6.0- width:500 //for ff+ie6.0} #box{ width:600px!important //for ff width:600 //for ff+ie6.0 width /**/:500 //for ie6.0-}4 浮动ie产生的双倍距离#box{ float: width:100 margin:0 0 0 100 //这种情况之下IE会产生200px的距离 display: //使浮动忽略} 这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);#box{ display: //可以为内嵌元素模拟为块元素 display: //实现同一行排列的的效果 diplay:IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度， 正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。 比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样： #box{ width: 80 height: 35}html&body #box{ width: height: min-width: 80 min-height: 35}6 页面的最小宽度min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个， 而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个&div& 放到 &body& 标签下，然后为div指定一个类： 然后CSS这样设计： #container{ min-width: 600 width:expression(document.body.clientWidth & 600? “600px”: “auto” );} 第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。7 清除浮动.hackbox{ display: //将对象作为块元素级的表格显示}或者.hackbox{ clear:} 或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持， 所 以并不影响到IE/WIN浏览器。这种的最麻烦的……#box:after{ content: “.”; display: height: 0; clear: visibility:}8 DIV浮动IE文本产生3象素的bug左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.#box{ float: width:800}#left{ float: width:50%;}#right{ width:50%;}*html #left{ margin-right:-3 //这句是关键} HTML代码&div id=”box”& &div id=”left”&&/div& &div id=”right”&&/div&&/div&9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)p[id]{}div[id]{} 这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用 属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.10 IE捉迷藏的问题当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。 有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。 解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。11 高度不适应高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用 margin 或paddign 时。 例： &div id=”box”& &p&p对象中的内容&/p& &/div& CSS：#box {background-color:# } #box p {margin-top: 20margin-bottom: 20 text-align: } 解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0overflow:}或者为DIV加上border属性。六、CSS兼容要点分析IE vs FFCSS 兼容要点：DOCTYPE 影响 CSS 处理FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 widthFF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式div 的垂直居中问题: vertical-align: 将行距增加到和整个DIV一样高 line-height:200 然后插入文字，就垂直居中了。缺点是要控制内容不要换行cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格XHTML+CSS兼容性解决方案小集使用XHTML＋CSS构架好处不少，但也确实存在一些问题，不论是因为使用不熟练还是思路不清晰，我就先把一些我遇到的问题写在下面，省的大家四处找^^1、在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：div{margin:30px!margin:28}注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：div{maring:30margin:28px}重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!2、IE5 和IE6的BOX解释不一致IE5下div{width:300margin:0 10px 0 10}div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则 是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改div{width:300px!width /**/:340margin:0 10px 0 10px}，关于这个/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的话，请告诉我一声，谢了！：）3、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义ul{margin:0;padding:0;}就能解决大部分问题4、关于脚本，在xhtml1.1中不支持language属性，只需要把代码改为& type=”text/java”&就可以了七、10个你未必知道的CSS技巧1、CSS字体属性简写规则一般用CSS设定字体属性是这样做的：以下为引用的内容：font-weight:font-style:font-varient:small-font-size:1line-height:1.5font-family:verdana,sans-但也可以把它们全部写到一行上去：&font: bold italic small-caps 1em/1.5em verdana,sans-真不错！只有一点要提醒的：这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值，这点要记上。2、同时使用两个类一般只能给一个元素设定一个类（Class），但这并不意味着不能用两个。事实上，你可以这样：&p&…&/p&同时给P元素两个类，中间用空格格开，这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话，后设置的起作用，即在CSS文件中放在后面的类的属性起作用。补充：对于一个ID，不能这样写&p id=”text side”&…&/p&也不能这样写3、CSS border的缺省值通常可以设定边界的颜色，宽度和风格，如：border: 3px solid #000这位把边界显示成3像素宽，黑色，实线。但实际上这里只需要指定风格即可。如果只指定了风格，其他属性就会使用缺省值。一般地，Border的宽度缺省是medium，一般等于3到4个像素；缺省的颜色是其中文字的颜色。如果这个值正好合适的话，就不用设那么多了。4、CSS用于文档打印许多网站上都有一个针对打印的版本，但实际上这并不需要，因为可以用CSS来设定打印风格。也就是说，可以为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印：&link type=”text/css” rel=”stylesheet” href=”/blog/stylesheet.css” media=”screen” /& &link type=”text/css” rel=”stylesheet” href=”printstyle.css” media=”print” /&第1行就是显示，第2行是打印，注意其中的media属性。但应该在打印CSS中写什么东西呢？你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片，再关掉一些导航按钮。要想了解更多，可以看“打印差异”这一篇。5、图片替换技巧一般都建议用标准的HTML来显示文字，而不要使用图片，这样不但快，也更具可读性。但如果你想用一些特殊字体时，就只能用图片了。比如你想整个卖东西的图标，你就用了这个图片：&h1&&img src=”/blog/widget-image.gif” alt=”Buy widgets” /&&/h1&这当然可以，但对搜索引擎来说，和正常文字相比，它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的：&h1&Buy widgets&/h1&但这样就没有特殊字体了。要想达到同样效果，可以这样设计CSS：h1 { background: url(/blog/widget-image.gif) no- height: image height text-indent: -2000px }注意把image height换成真的图片的高度。这里，图片会当作背景显示出来，而真正的文字由于设定了-2000像素这个缩进，它们会出现在屏幕左边2000点的地方，就看不见了。但这对于关闭图片的人来说，可能全部看不到了，这点要注意。6、CSS box模型的另一种调整技巧这个Box模型的调整主要是针对IE6之前的IE浏览器的，它们把边界宽度和空白都算在元素宽度上。比如：#box { width: 100 border: 5 padding: 20px }这样调用它：&div id=”box”&…&/div&这时盒子的全宽应该是150点，这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上，它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。但用CSS也可以达到同样的目的，让它们显示效果一致。#box { width: 150px } #box div { border: 5 padding: 20px }这样调用：&div id=”box”&&div&…&/div&&/div&这样，不管什么浏览器，宽度都是150点了。7、块元素居中对齐如果想做个固定宽度的网页并且想让网页水平居中的话，通常是这样：#content { width: 700 margin: 0 auto }你会使用 &div id=”content”& 来围上所有元素。这很简单，但不够好，IE6之前版本会显示不出这种效果。改CSS如下：body { text-align: center } #content { text-align: width: 700 margin: 0 auto }这会把网页内容都居中，所以在Content中又加入了text-align: left 。8、用CSS来处理垂直对齐垂直对齐用表格可以很方便地实现，设定表格单元 vertical-align: middle 就可以了。但对CSS来说这没用。如果你想设定一个导航条是2em高，而想让导航文字垂直居中的话，设定这个属性是没用的。CSS方法是什么呢？对了，把这些文字的行高设为 2em：line-height: 2em ，这就可以了。9、CSS在容器内定位CSS的一个好处是可以把一个元素任意定位，在一个容器内也可以。比如对这个容器：#container { position: relative }这样容器内所有的元素都会相对定位，可以这样用：&div id=”container”&&div id=”navigation”&…&/div&&/div&如果想定位到距左30点，距上5点，可以这样：#navigation { position: left: 30 top: 5px }当然，你还可以这样：margin: 5px 0 0 30px注意4个数字的顺序是：上、右、下、左。当然，有时候定位的方法而不是边距的方法更好些。10、直通到屏幕底部的背景色在垂直方向是进行控制是CSS所不能的。如果你想让导航栏和内容栏一样直通到页面底部，用表格是很方便的，但如果只用这样的CSS：#navigation { background: width: 150px }较短的导航条是不会直通到底部的，半路内容结束时它就结束了。该怎么办呢？不幸的是，只能采用欺骗的手段了，给这较短的一栏加上个背景图，宽度和栏宽一样，并让它的颜色和设定的背景色一样。body { background: url(/blog/blue-image.gif) 0 0 repeat-y }此时不能用em做单位，因为那样的话，一旦读者改变了字体大小，这个花招就会露馅，只能使用px。&& , && 本站html5资讯教程均分享互联网转载请注明出处，本文固定地址: