一个针对IE7的CSS Hack

2016-02-19 17:46 1 1 收藏

今天天气好晴朗处处好风光,好天气好开始,图老师又来和大家分享啦。下面给大家推荐一个针对IE7的CSS Hack,希望大家看完后也有个好心情,快快行动吧!

【 tulaoshi.com - Web开发 】

IE7 修复了很多 bug,也增加了对一些选择符的支持,所以现在诸如 *html {} 和 htmlbody {} 等针对 IE 隐藏或显示的 hack 都会在 IE7 中失效。虽然 CSS Hack 不推荐使用,条件注释才是万无一失的过滤器,但是条件注释只能出现在 HTML 中,CSS Hack 还是有用武之地的。Nanobot 发现了一些针对 IE7 的 CSS Hack,具体就是:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

body
html*
*+html

这三种写法,其中前两种都是不合法的 CSS 写法,在标准兼容浏览器中被被忽略,但是 IE7 却不这么认为。对于 body ,它会将缺失的选择符用全局选择符 * 代替,也就是将其处理成了 *body,而且不光对于 选择符,+,~ 选择符中这个现象也存在。对于 html* ,由于 html 和 * 之间没有空格,所以也是一种 CSS 语法错误,但 IE7 不会忽略,而是错误地认为这里有一个空格。对于第三种 *+html,IE7 认为 html 前面的 DTD 声明也是一个元素,所以 html 会被选中,这三种方法中只有这一种方法是合法的 CSS 写法,也就是说可以通过校验器的验证,因此也是作者推荐的 hack 用法。

最后作者给出了最佳方式:

IE 6 and below
Use * html {} to select the html element.
IE 7 and below
Use *+html, * html {} to select the html element.
IE 7 only
Use *+html {} to select the html element.
IE 7 and modern browsers only
Use htmlbody {} to select the body element.
Modern browsers only (not IE 7)
Use html/**/body {} to select the body element.

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

来源:https://www.tulaoshi.com/n/20160219/1616022.html

延伸阅读
标签: Web开发
关于CSS HACK的文章在webjx.com中提及的也很多。 CSSer必须掌握的关于IE6、IE7和FF的最简单的hack技巧。 FF浏览器 .test{     height:20px;     background-color:orange; } IE7浏览器 *+html .test{/*IE7*/     height:20px;     background-color:blue; ...
标签: Web开发
一、CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) style #wrapper { width: 100px!important; /* IE7+FF */ width: 80px; /* IE6 */ } /style 2, IE6/IE77对FireFox *+html 与 *html 是IE特有的标签, firefox 暂不支...
标签: Web开发
字体真是个麻烦的东西,然后又是个重要的东西。为以更方的解决字体问题,就像上次推荐的《》,为了Pixel Perfect,我们不断纠结。像支付宝在CSS Reset中是这样写的: body{ :12px Tahoma,Helvetica,Arial,,sans-serif}  而淘宝这样写: body, button, input, select, textarea { :12px/1.5 ta...
标签: Web开发
提示:8.23修复了ie 7显示错误的bug,请下载过的朋友重新下载。对此表示抱歉! 更新说明: 2007-08-23 11:50 1、修复了IE7.0下按钮文字错位的BUG(下载源码已经更新,请下载过的朋友重新下载)。 2、修改了部分js程序代码。(弹出框的高度只在初始化时进行计算) 2007-08-23 21:30  1、完善了组件简介,原来没有...
标签: Web开发
效果地址: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"html xmlns="http://www.w3.org/1999/xhtml"headmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /titlefixed ie6/titlest...

经验教程

164

收藏

53
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部