HTML CSS权重计算 浏览器兼容问题.doc

Html: /html/index.aspJquery:/jquery/index.asp JavaScript:/b.aspCss:/css/如何计算CSS权重:/?p=13css hack 浏览器兼容性解决方案:/web-note81/danghj/blog/item/ad07a0995e52981c6e068ce8.htmlIE8 最新css hack (IE7、IE8、FireFox浏览器兼容性解决方案)2010年05月17日776 次浏览 陈华 抢沙发 微软在IE8提供三种解析页面的模式IE8 Standard Modes ：默认的最标准的模式，严格按照W3C相关规定IE7 Standards Modes ：IE7现在用的解析网页的模式，开起机关是在中加入 Quirks Modes ：IE5用的解析网页的模式，开起机关是删除HTML顶部的DOCTYPE声明注意：不同模式间的网页在IE8中可以互相 frame ，因此因不会模式下的DOM和CSS渲染不一样，所以会引发很多问题，务必注意如果你的页面对IE7兼容没有问题，又不想大量修改现有代码，同时又能在 IE8中正常使用，微软声称，开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题，此代码如下：Example Source CodeIE8 最新css hack：”9例:”margin:0px auto9;”.这里的”9可以区别所有IE和FireFox.”*”IE6、IE7可以识别.IE8、FireFox不能.”_”IE6可以识别”_”,IE7、IE8、FireFox不能.自由转载，转载请注明： 转载自WEB开发笔记 本文链接地址: IE8 最新css hack (IE7、IE8、FireFox浏览器兼容性解决方案) /web-note81相关笔记 ie8中多幅链接图片布局错位的解决方法CSS Hack浏览器兼容IE6+IE7+IE8+IE9+FF2011-03-11 13:16自从安装了IE8.0正式版本!木头就对基本的几个 CSS HACK的做一下归纳!希望对网页前端布局DIV+CSS的实施者有所帮助!本文就主要以:IE6+IE7+IE8+IE9+FF为主要研究对象HACK原理:不同浏览器对各中字符的识别不同 (读完文章你会发现,FF和IE8对以下字符的识别能力完全相同)在 CSS中常用特殊字符识别表:(1)*:IE6+IE7都能识别*,而标准浏览器FF+IE8是不能识别*的;(2)!important: 除IE6不能识别!important外,FF+IE8+IE7都能识别!important ;(3)_: 除IE6支持_外,FF+IE8+IE7都不支持_;(4)9:所有IE浏览器都识别(IE6、IE7、IE8、IE9)示例:(1)区别FF(IE8)与IE6 IE7backgorund:orange;FF和IE8背景色将为橘黄色*backgorund:red;IE6和IE7背景色将为红色(2)区别FF(IE8)与IE6与IE7background:orange;FF和IE8背景色将为橘黄色*background:red !important;IE7背景色将为红色*background:blue;IE6背景色将为蓝色(3)区别FF(IE8)与IE6与IE7background:orange;FF和IE8背景色将为橘黄色*background:red;IE7背景色将为红色_background:blue;IE6背景色将为蓝色(4)区别FF与IE6 IE7 E8color:gray;FF等非IE浏览器字体色将为灰色color:red9;IE8 IE9字体色将为红色*color:green;IE7字体色将为绿色_color:blue;IE6字体色将为蓝色出处：/space.php?uid=367433&do=blog&id=21964.lanyu padding:10px; padding:9px9; /* all ie */ padding:8px0; /* ie8-9 */ *padding:5px; /* ie6-7 */ +padding:7px; /* ie7 */ _padding:6px; /* ie6 */提示:CSS HACK书写顺序:先写FF等非IE浏览器所需样式，其次写IE8所需样式，接着是IE7的，再接着才是IE6的！总结:实际运用中我感觉比较少用到!important ,只要你记住*和_我想就足够区别于FF(IE8)与IE6与IE7了.sofishpadding:10px;padding:9px9;/*allie*/padding:8px0;/*ie8-9目前应用于IE8的单独hack，情况比较少*/*padding:5px;/*ie6-7*/+padding:7px;/*ie7*/_padding:6px;/*ie6*/*webkitandopera*/mediaalland(min-width:0px).sofishpadding:11px;/*webkit*/mediascreenand(-webkit-min-device-pixel-ratio:0).sofishpadding:11px;/*opera*/mediaalland(-webkit-min-device-pixel-ratio:10000),notalland(-webkit-min-device-pixel-ratio:0).sofishpadding:11px;/*firefox*/-moz-documenturl-prefix().sofishpadding:11px;/*allfirefox*/html/*/body.sofish,x:-moz-any-link,x:defaultpadding:11px;/*newestfirefox*/HTML:添加bodyclass如何计算CSS权重十二月 15th, 2010前端技术评论(1)CSS, 权重计算 前段时间在做公司项目时，经常遇到一个问题css权重的计算，比如下面的例子： ;这里是内容 然后定义样式：#list li acolor:#666;这样链接的颜色变成了#666，但是，有时候因为某个li下的a需要特殊化样式，比如第一个li的a需要颜色加深，此时当然可以用li:first-child来实现，但是由于IE6的不支持，导致这么写将产生兼容性问题，至少在中国是不行滴那么就给第一个li的a定义个class吧：由于该代码是后来才加上去的，于是在写CSS样式的时候就直接：.first-linkcolor:#333;杯具出现了，测试时候发现第一个li的a并不是#333，依然还是#666，于是便引出了CSS权重的计算问题。在网上查了一下相关的资料，列举如下：1.HTML标签权重为1，如：span2.class权重为10，如：.first-link3.id权重为100，如：#list4.内联样式权重为1000，如5.伪元素（Pseudo-elements）权重为1，如：li:first-child6.属性权重为1，如：*rel=up根据以上的计算方法，文章开头的“#list li a”的权重应该是：100+1+1=102而“.first-link”的权重只有10这下明白了为什么“.first-link”的样式无法覆盖“#list li a”了，那么要实现一开始所说的特效只要将“.first-link”改为“#list li a.first-link”即可，当然也可以直接改为“#list .first-link”这样子权重也有100+10=110足以覆盖之前的102。从这里也可以看到id的权重是很大的，因此在设计中尽量避免使用id选择器，以免因为权重过大而覆盖了其他的样式，另外还要注意小心使用子选择器，否则很有