`
choujas
  • 浏览: 6940 次
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

CSS hacker

阅读更多
以下内容转自网络  仅供参考  貌似有错误


1.区别IE和非IE浏览器

#tip {
background:blue; /*非IE 背景蓝色*/
background:red \9; /*IE6、IE7、IE8背景红色*/
}
2.区别IE6,IE7,IE8,FF

【区别符号】:「\9」、「*」、「_」
【示例】:

#tip {
background:blue; /*Firefox 背景变蓝色*/   //IE9好像也是蓝色
background:red \9; /*IE8 背景变红色*/
*background:black; /*IE7 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
}
【说明】:因为IE系列浏览器可读「\9」,而IE6和IE7可读「*」(米字号),另外IE6可辨识「_」(底线),因此可以依照顺序写下来,就会让浏览器正确的读取到自己看得懂得CSS语法,所以就可以有效区分IE各版本和非IE浏览器(像是Firefox、Opera、Google Chrome、Safari等)。

3.区别IE6、IE7、Firefox (方法 1)

【区别符号】:「*」、「_」
【示例】:

#tip {
background:blue; /*Firefox背景变蓝色*/
*background:black; /*IE7 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
} 【说明】:IE7和IE6可读「*」(米字号),IE6又可以读「_」(底线),但是IE7却无法读取「_」,至于Firefox(非IE浏览器)则完全无法辨识「*」和「_」,因此就可以透过这样的差异性来区分IE6、IE7、Firefox

4.区别IE6、IE7、Firefox (方法 2)

【区别符号】:「*」、「!important」
【示例】:

#tip {
background:blue; /*Firefox 背景变蓝色*/
*background:green !important; /*IE7 背景变绿色*/
*background:orange; /*IE6 背景变橘色*/
} 【说明】:IE7可以辨识「*」和「!important」,但是IE6只可以辨识「*」,却无法辨识「!important」,至于Firefox可以读取「!important」但不能辨识「*」因此可以透过这样的差异来有效区隔IE6、IE7、Firefox。

5.区别IE7、Firefox

【区别符号】:「*」、「!important」
【示例】:

#tip {
background:blue; /*Firefox 背景变蓝色*/
*background:green !important; /*IE7 背景变绿色*/
} 【说明】:因为Firefox可以辨识「!important」但却无法辨识「*」,而IE7则可以同时看懂「*」、「!important」,因此可以两个辨识符号来区隔IE7和Firefox。

6.区别IE6、IE7 (方法 1)

【区别符号】:「*」、「_」
【示例】:

#tip {
*background:black; /*IE7 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
} 【说明】:IE7和IE6都可以辨识「*」(米字号),但IE6可以辨识「_」(底线),IE7却无法辨识,透过IE7无法读取「_」的特性就能轻松区隔IE6和IE7之间的差异。

7.区别IE6、IE7 (方法 2)

【区别符号】:「!important」
【示例】:

#tip {
background:black !important; /*IE7 背景变黑色*/
background:orange; /*IE6 背景变橘色*/
} 【说明】:因为IE7可读取「!important;」但IE6却不行,而CSS的读取步骤是从上到下,因此IE6读取时因无法辨识「!important」而直接跳到下一行读取CSS,所以背景色会呈现橘色。

8.区别IE6、Firefox

【区别符号】:「_」
【示例】:

#tip {
background:black; /*Firefox 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
} 【说明】:因为IE6可以辨识「_」(底线),但是Firefox却不行,因此可以透过这样的差异来区隔Firefox和IE6,有效达成CSS hack。
分享到:
评论

相关推荐

    CSS hacker使用小结(兼容IE6、7、8)

    什么是CSS hack 由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时,我们为了获得统一...

    html,css实现Hacker文字效果

    html,css实现Hacker文字效果

    类hackernews源码iNews.zip

    框架上,后端采用了我自己写的Restful框架 Pagon来开发,前端使用了@sofish的 typo.css, validator.js等开源库。第一版本上线前我们希望从最基本的功能开始,上线 > 快速迭代。整个开发过程非常快,只用了一天半...

    hackerweb:一个简单易读的Hacker News Web应用程序

    黑客网一个简单易读的Hacker News网络应用程序。 关于这个项目开始是我愚蠢的迷你项目之一。 我最初创建它是为了尝试iOS 5+ Mobile Safari的新功能-webkit-overflow-scrolling: touch CSS支持。 我需要某种内容来...

    hackernews-redesign:使用Next.js和TailwindCSS构建的最小的Hacker新闻客户端

    使用Next.js和TailwindCSS构建的外观极简的hackernews客户端。 这是我2年前进行的v2。 :sparkles: 技术栈 框架 样式 -动画 数据提取 :high_voltage: 关于 我最初在2年前进行了HN重新设计( ),这是我的第一个...

    hackernews-threadlines:通过uBlock Origin两秒钟安装即可获得Hacker News的纯CSS缩进线

    纯CSS解决方案意味着您只需将少量代码复制到uBlock Origin配置中即可获得Reddit样式的缩进线程。 使用uBlock Origin进行安装 转到uBlock Origin仪表板上的“我的过滤器”并复制以下七行: news.ycombinator....

    Hacker95:Windows 95之类的风格黑客新闻

    Hacker95是一个CSS样式表,可将Hacker News样式化为Windows 95/98样式的主题。 安装 根据使用的浏览器,安装方法会有所不同。 首先下载Hacker95并从文件夹中解压缩CSS文件: 火狐浏览器 对于Firefox,您需要将所有...

    hackernews:使用Nuxt.js构建的HackerNews克隆

    HackerNews克隆内置 。 模式 通用: : 托管在: npm run build + now.json 单页: : 托管在: npm run build-spa + dist/目录 性能 灯塔 - 交互式(更快的3G) 互动(新兴市场) 产品特点 服务器端渲染 代码...

    Ajax-hackernews-react.zip

    Ajax-hackernews-react.zip,Hackernews Spa Build Width React公司,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新...

    vue-hackernews-2.0

    vue-hackernews-2.0 使用Vue 2.0 + vue-router + vuex构建的HackerNews克隆,并带有服务器端渲染。 特征 注意:实际上,没有必要对这种大小的应用程序进行代码拆分(每个异步块只有几千字节),也不是提取额外CSS...

    gruvbox-css:我最小的Gruvbox CSS文件我一直在保存多个位置

    gruvbox-css 这是我几年来一直在研究CSS文件。 这是一个简单CSS主题,它通过使用来模拟并自动支持light模式。 HTML骨架 <!DOCTYPE html > < html > < head > < title > Page Title </ ...

    hackernews7-svelte:精简的Hacker News阅读器Framework7

    HackerNews7-svelte 另一个由和支持的黑客新闻阅读器 关于 这是一个演示应用程序,展示了如何使开发混合应用程序变得容易。 特征 此应用程序演示了Framework7-svelte v6功能。 该演示使用开发。 故事 故事 组件/...

    前端大教程 包括 ajax angular es5-6-7 html5+css3 node 等

    包括 .idea ajax angular es5-6-7 html+css html5+css3 javaScript modular node react vue zepro 前端优化以及项目构建等教程

    hackernews:用react构建的Hackernews克隆

    黑客新闻用react服务器端渲染构建的Hackernews克隆!发展yarnyarn dev其他命令yarn lint -运行eslint进行代码验证yarn build -生产生产yarn dev为开发而构建并启动开发服务器yarn start启动开发服务器此源代码涵盖了...

    史上最全的CSS hack方式一览(兼容多浏览器)

    为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS样式,我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS hack!

    react_hacker_news:使用ReactJS构建的Hacker News克隆

    添加CSS预处理器(Sass,Less等) 添加图像,字体和文件 使用public文件夹 更改HTML 在模块系统之外添加资产 何时使用public文件夹 使用全局变量 添加引导程序使用自定义主题 增加流量 添加路由器 添加自定义环境...

    Security for Web Developers Using JavaScript, HTML, and CSS 无水印pdf

    Use sandboxing techniques, in-house and third-party testing techniques, and learn to think like a hacker Implement a maintenance cycle by determining when and how to update your application software ...

    hacker-news-reader:使用React和Redux构建一个Hacker News克隆,并将其部署到生产环境中

    使用所有开源技术的Hacker News克隆(在夜间模式下!)。 试用: 受启发的设计-为忙碌的开发人员精心策划的开发新闻 使用我们的解决方案或以下内容以及我们的教程,以使用React和Redux构建自己的解决方案。 您将学...

    CSS Hack 有关浏览器兼容方面

    提到Hack大家肯定会想到电脑黑客(hacker)、和病毒程序联系到一块,不过在CSS中,Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法。说的更直白一些就是,你平时做个页面,布局正确,CSS正确,可就是在不同的...

Global site tag (gtag.js) - Google Analytics