- 浏览: 1522738 次
- 性别:
- 来自: 厦门
文章分类
- 全部博客 (516)
- Java (49)
- Java/Struts 2.0 (25)
- Java/Spring、Spring MVC (11)
- Java/Quartz (3)
- Java/Lucene (6)
- Java/Hibernate (19)
- Java/openJPA (7)
- Java/DWR (7)
- Java/Security、Spring Security/OAuth2 (6)
- Java/Threading (9)
- Java/XML (22)
- java/design pattern (4)
- Android (2)
- JavaScript (46)
- jquery (3)
- DB/MySQL (23)
- DB/Oracle (16)
- PHP (25)
- CSS (20)
- Linux (38)
- C/C++、DLL、Makefile、VC++ (31)
- 正则 (9)
- Eclipse (4)
- 安全、网络等概念 (25)
- 集群 (7)
- 网页 (5)
- 视频\音频 (1)
- HTML (6)
- 计算机数学/算法 (3)
- Virtualbox (1)
- LDAP (2)
- 数据挖掘 (6)
- 工具破解 (1)
- 其他 (13)
- Mail (1)
- 药材 (3)
- 游戏 (2)
- hadoop (13)
- 压力测试 (3)
- 设计模式 (3)
- java/Swing (2)
- 缓存/Memcache (0)
- 缓存/Redis (1)
- OSGI (2)
- OSGI/Gemini (0)
- 文档写作 (0)
- java/Servlet (3)
- MQ/RabbitMQ (2)
- MQ/RocketMQ (0)
- MQ/Kafka (1)
- maven (0)
- SYS/linux (1)
- cache/redis (1)
- DB/Mongodb (2)
- nginx (1)
- postman (1)
- 操作系统/ubuntu (1)
- golang (1)
- dubbo (1)
- 技术管理岗位 (0)
- mybatis-plus (0)
最新评论
-
pgx89112:
大神,请赐我一份这个示例的项目代码吧,万分感谢,1530259 ...
spring的rabbitmq配置 -
string2020:
不使用增强器 怎么弄?
OpenJPA的增强器 -
孟江波:
学习了,楼主,能否提供一份源代码啊,学习一下,十分感谢!!!4 ...
spring的rabbitmq配置 -
eachgray:
...
spring-data-redis配置事务 -
qljoeli:
学习了,楼主,能否提供一份源代码啊,学习一下,十分感谢!!!1 ...
spring的rabbitmq配置
前言罗唆(其实很多时候没有区别,只是我们没弄好就变成区别了)
Css 当中有许多的东西不不按照某些规律来的话,会让你很心烦,虽然你可以通过很多的hack,很多的!important 来控制它,但是你会发现长此以往你会很不甘心,看看许多优秀的网站,他们的CSS让 IE6,Ie7,Firefox,甚至Safari,Opera运行起来完美无缺是不是很羡慕?而他们看似复杂的模版下面使用的Hack 少得可怜。其实你要知道IE 和 Firefox 并不不是那么的不和谐,我们找到一定的方法,是完全可以让他们和谐共处的。不要你认为发现了hack的办法,你就掌握了一切,我们并不是Hack的奴隶。
div ul li 的嵌套顺序
今天只讲一个规则。就是<div><ul><li>的三角关系。我的经验就是<div>在最外面,里面是<ul>,然后再是<li>,当然<li>里面又可以嵌套<div>什么的,但是并不建议你嵌套很多东西。当你符合这样的规则的时候,那些倒霉的,不听话的间隙就不会在里面出现了,当你仅仅是<div>里面放<li>,而不用<ul>的时候,你会发现你的间隙十分难控制,一般情况下,IE6和IE7会凭空多一些间距。但很多情况你来到下一行,间隙就没了,但是前面的内容又空了很大一块,出现这种情况虽然你可以改变IE的Margin,然后调整Firefox下面的Padding,以便使得两者显示起来得效果很相似,但是你得CSS将变得臭长无比,你不得不多考虑更多可能出现这种问题补救措施,虽然你知道千篇一律来Hack它们,但是你会烦得要命。
具体嵌套写法
遵循上面得嵌套方式,<div><ul><li></li></ul></div> 然后在CSS 里面告诉 ul {Margin:0px;Padding:0px;list-style:none;},其中list-style:none是不让<li> 标记的最前方显示圆点或者数字等目录类型的标记,因为IE和Firefox显示出来默认效果有些不一样。因此这样不需要做任何手脚,你的IE6、和 IE7、Firefox显示出来的东西(外距,间距,高度,宽度)就几乎没什么区别了,也许细心的你会在某一个时刻发现一、两个象素的差别,但那已经很完美了,不需要你通过调整大片的CSS来控制它们的显示了,你愿意,你可以仅仅hack一两个地方,而且通常这种hack可以适应各种地方,不需要你重复在不同的地方调试不同的Hack方式–减轻你的烦恼。你可以ul.class1, ul.class2, ul.class3 {xxx:xxxx}的方式方便的整理出你要hack的地方,而统一Hack。尝试一下吧,再也不要乱嵌套了,虽然在Div+CSS的方式下你几乎可以想怎么嵌套就怎么嵌套,但是按照上面的规律你将轻松很多,从而事半功倍!
Hack和过滤器其实是一种迫不得已的办法,不要稍微掌握了几招然后就开始炫耀,到处乱写,虽然能够达到你的最初目的。不要到了完工的时候看一看你的CSS文件似乎到处是Hack,到处都是补丁,似乎已经为每个浏览器都量身定做了一遍CSS。在使用hack和过滤器的时候其实更应该多理解CSS的标准规范,实际上要用到hack的情况是很少的。Hack本身一词也是不包含正面意义的,而是讲这是一种迫不得已的行为,是利用了不正确的浏览器行为。
作为一般规则,使用以来与不支持的CSS的过滤器,而不是依赖于某种浏览器bug的过滤器,这可能比较安全。
对比相对高级的浏览器应用规则和生命,同时可以确定老式的浏览器会平稳的退化。当浏览器新版本发布时候,如果它现在支持你作为过滤器使用的CSS,那么它应该会如预期那样工作。因为浏览器会越来越符合标准,如果使用比较高级的CSS克服老式浏览器中的问题,这个问题很有希望在新的版本中得到解决。因此,使用不支持的CSS作为过滤机制是一种相对安全的方法。之所以说“相对”是因为浏览器有可能支持新的CSS,但是仍然表现出你试图修复的Bug。
因为使用依赖于解析bug的过滤器是一种有点冒险的方法。这是因为依赖于bug而不是特性。与前面的方法相似,如果解析bug被修复了,而你试图修复的bug还没有得到解决,那么可能会遇到问题。但是,更严重的是,解析bug在浏览器的新版本中可能有新的表现形式。例如,假设Firefox的一个新版本有某个解析bug。如果使用这个bug作为过滤器向IE提供不同的宽度值,从而解决专用框模型的问题,那么Firefox有可能突然继承这个宽度,这可能会破坏许多站点的设计。
在CSS中,有许多方法可以实现同样的效果,所以如果某些东西造成了问题,那么可以尝试另一种方法。许多CSS错误是由过分复杂的代码和标记造成的。如果使代码保持简单了,那么可以避免使用大多数招数Hack。
那么应该使用怎样的策略保证一个网站的CSS简单明了,而且又能适应众多浏览器呢?如果经过充分的思考,认识到只能应用某种Hack或过滤器,那么需要以明智且受控制的方式应用它。如果CSS短小而且简单,并且只需要应用很少几个Hack,那么将这些Hack放在主CSS文件中可能是安全的。但是,Hack往往相当复杂,使代码更加难懂。如果CSS文件很长,或者需要使用的招数比较多,那么最好将它们放在它们自己的样式表中。这不但使代码容易阅读,而且如果Hack在新的浏览器中造成了什么问题,那么可以准确的知道它的位置。与此相似,如果决定取消对某种浏览器的支持,那么只需要删除适当的CSS文件,就可以删除相关联的Hack。或者用程序判断浏览器信息,然后链接相应的CSS文件。或者可以用条件注释(见下一篇)。
为了帮助你正确的选择过滤器或者Hack,推荐这个站点(http://centricle.com/ref/css/filters/
)。这个站点提供了表格来描述那些过滤器在那些浏览器中是有效的,非常详尽。
常用Hack浏览器匹配图:
有条件注释是一种专门的(因为是非标准的)、对常规(X)Html注释的Microsoft扩展。顾名思义,有条件注释使你能够根据条件(比如浏览器版本)显示代码块。因为使非标准的,但是有条件注释对于其他所有浏览器作为常规注释出现,因此本质上是无害的。有条件注释在Windows 上的IE5中首次出现,并且得到了Windows浏览器的所有后续版本的支持。
要想将一个特定的样式表交给IE5、IE6、IE7或更高的版本,那么可以在(X)Html文档的开头放置一下代码:
<!--[if IE] <style type="text/css"> @import ("ie.css"); </style> -->
Windows上的IE5和更高版本会接收样式表ie.css,而其他所有浏览器只会看到一些被注释掉的文本。可以使用有条件注释指定一种特定的浏览器,比如IE6.0
<!-- [if IE 6] <style type="text/css"> @import ("ie60.css"); </style> -->
还可以指定一组浏览器,比如IE5.5和更高的版本:
<!-- [if gte IE 5.5000] <style type="text/css"> @import ("ie55up.css"); </style> -->
或者IE7
<!-- [if It IE 7] <style type="text/css"> @import ("ie70.css"); </style> -->
这种办法极其有效,而且非常容易记住。主要的确定是这些注释需要放在HTML中,而不是放在CSS中。如果某一阶段你希望停止支持某种浏览器,就需要从每个页面中删除注释,当然这只是针对静态页面的站点了,如果你是动态网站的话,把CSS作为可动态调用的一部分,这样修改起来也很方便的。如果你觉得还不好,那我们下一篇再看另外一个过滤器Tantek Celik。
Tantek Celik 基于浏览器解析错误创建了一系列过滤器(http://tantek.com/css/examples/),允许使用@import规则将样式表提供给选择的浏览器。因为他们是CSS规则,所有这些过滤器可以放在一个CSS文件中,这样就可以再一个地方集中的控制过滤的文件。将招数Hack隔离到浏览器特定的CSS文件中,可以大大简化对招数Hack的管理。如果决定停止对某一浏览器(比如IE 5.0)的支持,那么只需要删除相关的样式表,而不需要再大量页面代码中进行搜索和修改。
注意: /**/ 是CSS中的注释格式。其实下面所说的所有过滤方法都是 /**/注释 和 \ 转义的混合效果。
要想将CSS文件传递给 Windows 上的IE5.5 和IE5,可以使用 Tantek 的中统过滤器:
@media tty { i{content:”\”;/*” “*/}} @import ‘ie5x.css’; /*”;} }
这个过滤器看起来像一堆无意义的规则,而且对于许多浏览器确实如此。只能理解CSS 1的浏览器不认识@media 规则,因此完全忽略它。能力更强的浏览器会看到@media 规则中的一个声明,其目标是寻找<i>元素。由于第二个引号前面有一个转义字符,Content 属性的值被认为是一个无意义的字符串。基本上,现代浏览器会看到下面这样的规则:
@media tty { i { content:”Blah, blah blah”;} }
转义字符是一个保留字符(通常是反斜线),它使解析器忽略后面的保留字符。所以所以,如果希望使用 CSS content 属性自动生成一个引号,那么必须对它进行转义,否则它就会结束前引号:
blockquote:before {content: “\”"}
tty 媒体类型指的终端和电传打印机。新运的使,当前没有设备支持这种媒体类型,所以符合标准的浏览器实际上会忽略整个规则。
但是,IE5.x/Windows 不理解转移字符的,所以会提前结束内容声明。后面的字符会结束<i> 和@media规则,这导致应用@import 规则。所有多于的字符都被注释掉,因此再 IE 5.x/Win 看来整个规则像下面这样:
@media tty { i { content:”blah” ; /* blah */ } } @import ‘ie5x.css’ /* blah */
这非常复杂,但是幸运的是,你不需要知道这些过滤器是则怎么工作的,只需要知道怎么使用他们就可以了。
为了向IE 5.x/Win 的特定版本提供CSS文件,创建了中通过滤器的两个变体,他们利用了这些特定浏览器中各种Bug。这些过滤器称为IE 5/Windows 带通过滤器:
@media tty { i {content:”\”;/*” “*/}}; @import ‘ie50win.css’; {;}/*”;} }/* */
和IE 5.5/Windows 带通过滤器}
@media tty{ i {content:”\”;/*” */}}@m; @import ‘ie55win.css’; /*;} }
另一种可能希望明确指定的浏览器是Mac 上的IE 5.2。为此,可以使用Tantek的IE5/Mac带通过滤器,它利用了另一个转义Bug,这一次是在注释中:
/*\*//*/ @import “ie5mac.css”; /**/
IE 5/Mac 错误地对第二个星号进行转义,导致应用@import 规则。因此, IE5/mac 会看到下面这样的规则:
/* blah */ @import “ie5mac.css”; /**/
而其他所有浏览器都会正确的忽略转义的元素,因为它放在一个注释中,@import 规则被注释掉了。其他所有浏览器都会看到下面这样的规则(实际上就是没有规则)
/* blah *//* blah */
与其他带通过滤器一样,不需要理解这个过滤器的工作原理,直接使用即可。这些过滤器的出色之处在于,他们巧妙的利用了老式浏览器中的Bug。因此,应该可以放心的使用他们,他们应该不会在新式的浏览器中造成问题。
子选择器招数(Hack)
最安全的过滤器依赖于未实现的CSS,而不是浏览器Bug。因为这些过滤器使用有效的CSS选择器来应用有效的声明,所以严格地说,他们根本不是过滤器。他们仅仅是某些浏览器所不能理解的有效CSS规则。这些过滤器中的第一个称为子选择器招数。Windows上的IE6和更低版本的IE不支持子选择器,所以可以使用它对这些浏览器隐藏规则。为了让这种过滤器起到作用,必须确保在子选择器前后没有空格。
在这个示例中,使用子选择器招数(Hack)对IE 5-6/Win 隐藏透明的北京PNG图象。
html>body { background-image:(bg.png) }
IE7 预期会支持子选择器,还会支持PNG透明度。通过以这种方式使用子选择器,就允许IE的新版本看到透明背景,而不需要修改代码,因而提供了向前兼容性。等于ie5,i56视而不见,而IE7可以用得恰当好处,这里并不是多浏览器兼容,而是向前兼容。
属性选择器招数(Hack)
另一种过滤器规则的有趣方法是使用属性选择器。许多当前的浏览器(比如 Safari–Mac苹果上的 和Firefox IE7)支持使用属性选择器,但是IE6并不支持它。因此,可以使用属性选择器在比较高级的浏览器中对类和ID应用样式。在这个示例中,使用属性选择器在符合标准的浏览器中将背景PNG应用于内容div:
div[id="content"] { background=url(bg.png); }
你可以用这些让不同浏览器显示出不同的效果,当然也可以使用它在多浏览器里显示同样的效果。
对于CSS当中让IE7、IE6、Firefox兼容最著名且最有用的CSS过滤器之一是星号 * Html HACK。这个过滤器非常容易记住,它可以制定IE6和更低版本。正如你知道的,Html 元素被认为是网页上的第一个元素,即根元素。但是,IE 的所有当前版本有一个匿名的根元素,它包围着Html 元素。那么这个匿名的元素或者说隐藏的元素到底是什么元素呢?其实它就是鼎鼎大名的* 号,所以我们可以用星号来指定的规则应用于那些被星号包围的 HTML。
IE6以及更老的IE5.5
* html { font-size:small; }
在任何非ie的浏览器因为没有这个规则(Html元素被*号包围),所以其他的浏览器就会当作看不见,所以当你指定这个规则的时候,你可以放心的应用在IE6以及前一版本的IE5.5要展示效果中。IE 7 并没有完全去掉这个 Hack。而是用这样的办法来让过滤,那就是用 *+
IE7
*+html { font-size:small }
这样的表达,就是说除了IE7能认识这个font-size:small以外,其他的浏览器都不会看到这一条的,可以说这是IE7的专属Hack。
这样的方式可以写在同一个CSS文件,并且同时都会针对不同的浏览器产生独特的效果。所以在设计页面或者样式的时候,你不妨用FireFox 来做第一浏览器,对照Firefox样式写好后,再把页面放到IE7下看看,进行适当的调整,再放到IE6下面看看,进行适当的调整。基本上按照<div><ul><li></li></ul></ul>的顺序嵌套的话,IE6根IE7的规则是差不多的。调好了IE6的样式就等于调好了IE7的样式,反之亦然。再者,用Firefox来写样式还是更符合W3C一些,因为IE6和IE7要考虑到以前的兼容性,不得不在规范上做些让步,达到兼容的目的。虽然大家都很憎恶为什么多一个Firefox,但是这是没办法的:(。你要掌控它而不是被它掌控了^_^。
基本上用星号搭配搞定IE6,IE7,Firefox以后,像Opera之类的浏览器也会正常显示的。就不用单独考虑他们的兼容问题了。
发表评论
-
clear在CSS中的妙用
2009-12-24 21:53 1819在DIV + CSS设计网页中,经常需要设置多个DIV并列排 ... -
多浏览器测试的利器-IETester,自带IE5.5,IE6,IE7,IE8等多个内核.
2009-11-05 10:26 2108辛苦做出来的一个网站,到别人的电脑上显示得乱七八糟的,为啥?就 ... -
第6章 文本属性==>文本缩进 P141
2009-06-05 22:27 959line-height 属性是指文本基线之间的距离,而不是字体 ... -
第6章 文本属性==>文本缩进 P135
2009-05-24 19:55 1236通过使用text-index属性,所有元素的第一行都可以缩进一 ... -
第5章 字体
2009-05-24 19:30 1236字体加粗:font-weight=>值:normal | ... -
第3章 结构和层叠 => 特殊性(优先级) P69
2009-05-03 07:40 1124对于每个CSS规则,用户代理(浏览器)会计算选择器的特殊性,并 ... -
CSS 样式学习库
2009-04-30 23:06 996CSS菜单库 http://www.dynamicd ... -
第2章 选择器 =>伪类和伪元素 P57
2009-04-30 22:33 1465利用伪类选择器和伪元素选择器,可以为文档中不一定具体存在的结构 ... -
第2章 选择器 =>选择相邻兄弟元素P56
2009-04-30 22:28 1602假设你希望对一个标题 ... -
第2章 选择器 =>特定属性选择类型 P49
2009-04-27 00:19 994<!DOCTYPE html PUBLIC " ... -
第2章 选择器 =>属性值选择器 P46
2009-04-26 23:05 998属性值 选择器 除了可以选择有某些属性的元素 ... -
第2章 选择器 =>简单的属性选择器 P44
2009-04-26 22:53 1268如果希望选择有某个属笥的元素,而不论该属性值是什么,可以使用一 ... -
第2章 选择器 =>多类选择器 P41
2009-04-26 22:45 1352现在假设希望class为warni ... -
第2章 选择器 =>类选择器 P39
2009-04-26 11:39 947<!DOCTYPE html PUBLIC " ... -
第2章 选择器 =>选择器分组 P34
2009-04-26 11:03 958<!DOCTYPE html PUBLIC " ... -
第2章 选择器 =>选择子元素 P54
2009-04-26 10:37 1305<!DOCTYPE html PUBLIC " ... -
第1章 CSS和文档局 => @import指令
2009-03-12 22:51 1123与link类似,.@import用于指示WEB浏览器加载一个外 ... -
第1章 CSS和文档局 => link标记 P19
2009-03-12 21:51 1148对于<link>标签的属性详解: ... -
CSS入门4:css选择符
2008-08-11 14:58 812一.选择符模式 模式/含义/内容描述 * 匹 ...
相关推荐
标题中的“让CSS兼容IE和Firefox的技巧集合”是指在网页设计中,针对Internet Explorer(IE)和Firefox这两种浏览器之间CSS样式兼容性问题的解决策略。描述中的“嘿呌,IE不再是个bug”暗示了这些技巧能帮助开发者...
在网页设计中,CSS(层叠样式表)的兼容性问题常常困扰着开发者,尤其是在处理IE6.0、IE7.0与Firefox等不同浏览器之间的差异。以下是一些解决这些浏览器间CSS兼容问题的方法: 1. **DOCTYPE声明**:DOCTYPE声明会...
在网页设计中,CSS(层叠样式表)的兼容性是一个关键问题,特别是对于历史悠久的Internet Explorer(IE)和相对现代的Firefox浏览器。由于这两者对CSS标准的解析方式不同,开发者经常面临兼容性挑战。以下是一些针对...
### CSS解决IE6、IE7及Firefox兼容性问题详解 #### 一、引言 随着互联网技术的发展,浏览器种类日益增多,其中Internet Explorer (IE) 和 Firefox 是早期非常流行的两款浏览器。尤其在2000年代中期,IE6、IE7 和 ...
在网页设计中,CSS(层叠样式表)的兼容性问题常常困扰着开发者,尤其是在处理IE(Internet Explorer)和Firefox这两个浏览器之间的差异时。本文主要针对这些差异提供了一些实用的技巧,帮助开发者解决常见的CSS兼容...
此外,CSS动画和过渡在IE和Firefox中也有区别。Firefox支持`transition`和`animation`,但IE10以下版本需要使用其专有的`-ms-transition`和`-ms-animation`。同时,CSS3的Flexbox布局在IE10及更高版本才有良好支持,...
本文将深入探讨解决CSS在IE和Firefox之间兼容性问题的一些关键技巧。 首先,理解盒模型差异是解决兼容性问题的第一步。IE6、7使用了其独有的“怪异盒模型”,其中元素宽度包括了边框和内填充,而Firefox等其他...
在网页设计领域,CSS(Cascading Style Sheets)是用于控制网页布局和样式的语言,但不同的浏览器在解析和执行CSS规则时可能存在差异,尤其是在早期版本的Internet Explorer(IE)和Firefox之间。这个"CSS兼容IE和...
CSS 兼容大全 IE5,IE5.5,IE6,IE7,Firefox,Opera,Safari 等浏览器 CSS 兼容大全是指在不同的浏览器中,例如 IE5,IE5.5,IE6,IE7,Firefox,Opera,Safari 等,如何使网页正常显示的技术。这个技术的核心是 CSS Hack,即...
不同浏览器对CSS的支持程度各不相同,特别是Internet Explorer(IE)系列浏览器与其他现代浏览器(如Firefox、Chrome等)之间存在较大的差异。本文将详细介绍如何通过CSS技巧来实现对IE浏览器和其他非IE浏览器之间的...
尤其是在处理旧版Internet Explorer(如IE6、IE7、IE8)与现代浏览器(如Firefox、Chrome等)之间的样式差异时,CSS Hack技巧成为了必不可少的工具。本文将深入探讨不同浏览器兼容性的CSS Hack代码及其实例,帮助...
然而,由于各个浏览器对CSS规范的实现存在差异,尤其是IE(Internet Explorer)和Firefox,开发者经常面临样式兼容性问题。本文将深入探讨在IE和Firefox中常见的CSS样式问题及其解决方案。 1. **盒模型差异** - IE...
然而,由于不同浏览器的解析方式存在差异,尤其是在Internet Explorer(IE)和Firefox之间,CSS兼容性问题时常困扰着开发者。本文将深入探讨如何解决CSS在IE与Firefox下的兼容问题,帮助你的网页在各种浏览器中展现...
本文将详细介绍IE和Firefox浏览器的JavaScript、CSS、HTML调试插件,帮助你更好地理解和掌握这些工具。 首先,我们关注的是IE浏览器的调试插件。压缩包中的"IEDevToolBarSetup.msi"文件就是用于安装Internet ...
然而,由于不同的浏览器对这两者的支持和实现存在差异,开发者经常需要面对兼容性问题,尤其是针对Internet Explorer(IE)和Firefox这两个历史悠久且具有显著差异的浏览器。以下是对"js、css在IE和火狐上的差异和...
JavaScript 和 CSS 在不同的浏览器上,特别是 Internet Explorer (IE) 和 Mozilla Firefox 之间存在一些差异,这些差异主要体现在解析规则、实现细节以及某些功能的支持上。理解这些差异对于编写跨浏览器兼容的代码...
在前端开发中,CSS兼容性是一个常见的挑战,尤其是在处理IE和Firefox这两个浏览器时。由于它们对CSS标准的实现存在差异,导致在不同浏览器下显示的效果可能不尽相同。以下是一些关键点,帮助开发者理解和解决这些...
压缩包中的“CSS_HACK_兼容列表_Firefox,_IE5,_IE5.5,_I.txt”文件很可能是详细列举了各种CSS Hack的清单,包括适用于Firefox和各个版本的IE浏览器的Hack。这份清单对于开发者来说是一份宝贵的参考资料,可以帮助...