p对象中的内容
解决方法:在P对象上下各加2个空的div对象CSS代码:.1{height:0px;overflow:hidden;}或者为DIV加上border属性。12.IE6下为什么图片下有空隙产生解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img为display:block或者设置vertical-align属性为vertical-align:top|bottom|middle|text-bottom都可以解决.13.如何对齐文本与文本输入框加上vertical-align:middle;p对象中的内容
CSS:#box{background-color:#eee;}#boxp{margin-top:20px;margin-bottom:20px;text-align:center;}解决方法:在P对象上下各加2个空的div对象CSS代码:.1{height:0px;overflow:hidden;}或者为DIV加上border属性。屏蔽IE浏览器(也就是IE下不显示)*:lang(zh)select{font:12px!important;}/*FF,OP可见*/select:empty{font:12px!important;}/*safari可见*/这里select是选择符,根据情况更换。第二句是MAC上safari浏览器独有的。仅IE7识别*+html{…}当面临需要只针对IE7做样式的时候就可以采用这个HACK。IE6及IE6以下识别*html{…}这个地方要特别注意很多地主都写了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。html/**/>bodyselect{……}这句与上一句的作用相同。仅IE6不识别select{display/*IE6不识别*/:none;}这里主要是通过CSS注释分开一个属性与值,流释在冒号前。仅IE6与IE5不识别select/**/{display/*IE6,IE5不识别*/:none;}这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。仅IE5不识别select/*IE5不识别*/{display:none;}这一句是在上一句中去掉了属性区的注释。只有IE5不识别盒模型解决方法selct{width:IE5.x宽度;voice-family:\"\voice-family:inherit;width:正确宽度;}盒模型的清除方法不是通过!important来处理的。这点要明确。清除浮动select:after{content:\".\";display:block;height:0;clear:both;visibility:hidden;}在Firefox中,当子级都为浮动时,那么父级的高度就无法完全的包住整个子级,那么这时用这个清除浮动的HACK来对父级做一次定义,那么就可以解决这个问题。截字省略号select{-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}这个是在越出长度后会自行的截掉多出部分的文字,并以省略号结尾,很好的一个技术。只是目前Firefox并不支持。只有Opera识别@mediaalland(min-width:0px){select{……}}针对Opera浏览器做单独的设定。以上都是写CSS中的一些HACK,建议遵循正确的标签嵌套(divulli嵌套结构关系),这样可以减少你使用Hack的频率,不要进入理解误区,并不是一个页面就需要很多的hack来保持多浏览器兼容),很多情况下也许一个Hack都不用也可以让浏览器工作得非常好,这些都是用来解决局部的兼容性问题,如果希望把兼容性的内容也分离出来,不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式,也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。IE5.x的过滤器,只有IE5.x可见@mediatty{i{content:\"\";/*\"\"*/}}@import'ie5win.css';/*\";}}/**/IE5/MAC的过滤器,一般用不着/**//*/@import\"ie5mac.css\";/**/下面是IE的条件注释,个人觉得用条件注释调用相应Hack是比较完美的多浏览器兼容的解决办法。把需要hack的地方单独放到一个文件里面,当浏览器版本符合的时候就可以调用那个被Hack的样式,这样不仅使用起来非常方便,而且对于制作这个CSS本身来讲,可以更严格的观察到是否有必要使用hack,很多情况下,当我本人写CSS如果把全部代码包括Hack都写到一个CSS文件的时候的时候会很随意,想怎么Hack就怎么Hack,而你独立出来写的时候,你就会不自觉的考虑是否有必要Hack,是先HackCSS?还是先把主CSS里面的东西调整到尽可能的不需要Hack?当你仅用很少的Hack就让很多浏览器很乖很听话的时候,你是不是很有成就感呢?你知道怎么选择了吧~~呵呵IE的if条件Hack自己可以灵活使用参看这篇IE条件注释OnlyIE所有的IE可识别只有IE5.0可以识别OnlyIE5.0+IE5.0包换IE5.5都可以识别仅IE6可识别OnlyIE7/-IE6以及IE6以下的IE5.x都可识别OnlyIE7/-仅IE7可识别IE6、IE7、FF与兼容性有关的特性CSSHACK代码:所有浏览器通用height:100px;IE6专用_height:100px;poweredby25175.netIE6专用*height:100px;IE7专用*+height:100px;IE7、FF共用height:100px!important(优先级);一、CSSHACK以下两种方法几乎能解决现今所有HACK.1,!important(不是很推荐,用下面的一种感觉最安全)随着IE7对!important的支持,!important方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)代码:2,IE6/IE77对FireFoxp对象中的内容
CSS:#box{background-color:#eee;}#boxp{margin-top:20px;margin-bottom:20px;text-align:center;}解决方法:在P对象上下各加2个空的div对象CSS代码:.1{height:0px;overflow:hidden;}或者为DIV加上border属性。屏蔽IE浏览器(也就是IE下不显示)*:lang(zh)select{font:12px!important;}/*FF,OP可见*/select:empty{font:12px!important;}/*safari可见*/这里select是选择符,根据情况更换。第二句是MAC上safari浏览器独有的。仅IE7识别*+html{…}当面临需要只针对IE7做样式的时候就可以采用这个HACK。IE6及IE6以下识别*html{…}这个地方要特别注意很多地主都写了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。html/**/>bodyselect{……}这句与上一句的作用相同。仅IE6不识别select{display/*IE6不识别*/:none;}这里主要是通过CSS注释分开一个属性与值,流释在冒号前。仅IE6与IE5不识别select/**/{display/*IE6,IE5不识别*/:none;}这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。仅IE5不识别select/*IE5不识别*/{display:none;}这一句是在上一句中去掉了属性区的注释。只有IE5不识别盒模型解决方法selct{width:IE5.x宽度;voice-family:\"\voice-family:inherit;width:正确宽度;}盒模型的清除方法不是通过!important来处理的。这点要明确。清除浮动select:after{content:\".\";display:block;height:0;clear:both;visibility:hidden;}在Firefox中,当子级都为浮动时,那么父级的高度就无法完全的包住整个子级,那么这时用这个清除浮动的HACK来对父级做一次定义,那么就可以解决这个问题。截字省略号select{-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}这个是在越出长度后会自行的截掉多出部分的文字,并以省略号结尾,很好的一个技术。只是目前Firefox并不支持。只有Opera识别@mediaalland(min-width:0px){select{……}}针对Opera浏览器做单独的设定。以上都是写CSS中的一些HACK,建议遵循正确的标签嵌套(divulli嵌套结构关系),这样可以减少你使用Hack的频率,不要进入理解误区,并不是一个页面就需要很多的hack来保持多浏览器兼容),很多情况下也许一个Hack都不用也可以让浏览器工作得非常好,这些都是用来解决局部的兼容性问题,如果希望把兼容性的内容也分离出来,不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式,也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。IE5.x的过滤器,只有IE5.x可见@mediatty{i{content:\"\";/*\"\"*/}}@import'ie5win.css';/*\";}}/**/IE5/MAC的过滤器,一般用不着/**//*/@import\"ie5mac.css\";/**/下面是IE的条件注释,个人觉得用条件注释调用相应Hack是比较完美的多浏览器兼容的解决办法。把需要hack的地方单独放到一个文件里面,当浏览器版本符合的时候就可以调用那个被Hack的样式,这样不仅使用起来非常方便,而且对于制作这个CSS本身来讲,可以更严格的观察到是否有必要使用hack,很多情况下,当我本人写CSS如果把全部代码包括Hack都写到一个CSS文件的时候的时候会很随意,想怎么Hack就怎么Hack,而你独立出来写的时候,你就会不自觉的考虑是否有必要Hack,是先HackCSS?还是先把主CSS里面的东西调整到尽可能的不需要Hack?当你仅用很少的Hack就让很多浏览器很乖很听话的时候,你是不是很有成就感呢?你知道怎么选择了吧~~呵呵IE的if条件Hack自己可以灵活使用参看这篇IE条件注释OnlyIE所有的IE可识别只有IE5.0可以识别OnlyIE5.0+IE5.0包换IE5.5都可以识别仅IE6可识别OnlyIE7/-IE6以及IE6以下的IE5.x都可识别OnlyIE7/-仅IE7可识别Css当中有许多的东西不不按照某些规律来的话,会让你很心烦,虽然你可以通过很多的hack,很多的!important来控制它,但是你会发现长此以往你会很不甘心,看看许多优秀的网站,他们的CSS让IE6,Ie7,Firefox,甚至Safari,Opera运行起来完美无缺是不是很羡慕?而他们看似复杂的模版下面使用的Hack少得可怜。其实你要知道IE和Firefox并不不是那么的不和谐,我们找到一定的方法,是完全可以让他们和谐共处的。不要你认为发现了hack的办法,你就掌握了一切,我们并不是Hack的奴隶。divulli的嵌套顺序今天只讲一个规则。就是因篇幅问题不能全部显示,请点此查看更多更全内容