当前位置:  开发笔记 > 前端 > 正文

CSShack大全之特殊符号的应用

由于各大浏览器尤其IE浏览器对web标准支持情况不一,导致标准的网页在各个浏览器中的表现不一,因此,解决各浏览器兼容性问题成为了前端工程师最重要的工作之一,而所谓的hack技术则是前端开发中必用的。CSSha...">

 

由于各大浏览器尤其IE浏览器对web标准支持情况不一,导致标准的网页在各个浏览器中的表现不一,因此,解决各浏览器兼容性问题成为了前端工程师最重要的工作之一,而所谓的hack技术则是前端开发中必用的。

CSS hack的写法有很多种,其中,特殊符号的应用最为普遍,也最为简洁,下面一一介绍了特殊符号类型的CSS hack技术:

1、反斜线(\)

适用浏览器:IE/Mac

反斜线(\)hack利用了IE/Mac的一个bug。以\*/结束的注释在IE/Mac上是不正确关闭的,所以那些需要在IE/Mac上被忽略的语句可以放在这种注释后面。

/* 在IE Mac上忽略下面的语句 \*/

selector { ...styles... }

/* 忽略结束 */

2、下划线(_)

适用浏览器:IE6及其以下版本

IE 6 及以下的版本可以识别带有下划线前缀的属性,而其它浏览器会忽略它。因此,一个属性前面加上下划线或者连字符,就成为了IE6及以下版本浏览器的专有属性。

#elem {

width: [W3C Model Width];

_width: [BorderBox Model];

}

PS:这个hack利用浏览器的bug使用了无效的CSS,因而不推荐使用。

3、星号(*)

适用浏览器:IE7以下版本

除了下划线和连字符,版本7及以下的IE可以识别以非字母字符为前缀的属性,而其它浏览器会忽略。

#elem {

width: [W3C Model Width];

*width: [BorderBox Model];

}

PS:这个hack利用浏览器的bug使用了无效的CSS,因而不推荐使用。

4、星号 HTML(* html)

适用浏览器:IE4-6

HTML元素是W3C标准DOM的根元素,但是IE 4至6的版本中还有一个神秘的父元素。完全兼容的浏览器会忽略这个* html选择器,但IE4-6却会对它正常处理。

* html p {font-size: 5em; }

PS:这个HACK使用了完全有效的CSS。

5、星号加号(*+)

适用浏览器:IE7

*:first-child+html p { font-size: 5em; }

或者:

*+html p { font-size: 5em; }

PS:只在IE7标准模型里工作正常,在怪异模式下不能用。同时,也被IE8的兼容模式(相当于IE7的标准模式)所支持。它也使用了有效的CSS。

6、子选择器(>)

适用浏览器: IE6以上版本及非IE浏览器

IE6和早期的版本不支持“子选择器”(>),我们可以利用这个为其它浏览器指定特别的规则。

html > body p { color: blue; }

7、子选择器加注释(>/**/)

适用浏览器: IE7以上版本及非IE浏览器

虽然IE7支持对子选择器,但通过以下hack方法也可以把IE7也排除。当一个空的注释紧跟在子选择器的后面重复的时候,IE7会不识别后面的规则,就和较早版本的浏览器一样。

html >/**/ body p { color: blue; }

 

我的个人博客:http://www.wuyuelan.com


推荐阅读
  • 期末Web开发综合实践项目:运用前端技术打造趣味小游戏体验
    期末Web开发综合实践项目中,学生通过运用HTML、CSS和JavaScript等前端技术,设计并实现了一款趣味性十足的小游戏。该项目不仅检验了学生对前端基础知识的掌握情况,还提升了他们的实际操作能力和创意设计水平。视频链接展示了项目的最终成果,直观呈现了游戏的互动性和视觉效果。 ... [详细]
  • 新年伊始,正是学习的最佳时机。本文全面解析了CK1957-Zookeeper的核心概念与实践技巧,旨在帮助初学者快速掌握这一深度学习工具。通过详细的理论讲解和实际操作示例,读者可以更好地理解Zookeeper的工作原理及其在分布式系统中的应用。无论是新手还是有一定基础的学习者,都能从中受益匪浅。 ... [详细]
  • 探究Oracle数据库字符集编码的详细方法与实践
    本文深入探讨了Oracle数据库字符集编码的详细方法与实践。首先,通过执行 `SELECT USERENV('language') FROM DUAL;` 查询服务端字符集编码。其次,通过在注册表中搜索 `NLS_LANG` 参数来查看客户端字符集编码。此外,文章还介绍了如何在不同场景下正确配置和转换字符集,以确保数据的一致性和完整性。 ... [详细]
  • 解决手机浏览器无法加载CSS文件的技术方法与常见问题分析
    针对手机浏览器无法加载CSS文件的问题,本文提出了几种有效的解决方案:首先,确保CSS文件路径正确无误;其次,统一CSS文件和网页的编码格式;最后,检查并修正文件后缀的MIME类型设置,以确保浏览器能够正确识别和解析CSS文件。此外,还探讨了可能导致该问题的其他常见原因,如缓存问题和服务器配置错误等。 ... [详细]
  • Python学习:环境配置与安装指南
    Python作为一种跨平台的编程语言,适用于Windows、Linux和macOS等多种操作系统。为了确保本地已成功安装Python,用户可以通过终端或命令行界面输入`python`或`python3`命令进行验证。此外,建议使用虚拟环境管理工具如`venv`或`conda`,以便更好地隔离不同项目依赖,提高开发效率。 ... [详细]
  • 本文介绍了在PHP环境中优化表格列表和表单Label样式的技巧,通过CSS代码提升表单的视觉效果。具体包括为每个标签添加箭头背景,并在标签获得焦点时实现背景高亮的效果。示例代码展示了如何为“姓名”和“邮件”字段应用这些样式,适用于phpStudy开发环境。 ... [详细]
  • Jenkins学习精华:自动化构建与持续集成入门指南
    本文综合了网络资源及同事分享的PPT内容,详细介绍了Jenkins在自动化构建与持续集成中的应用。首先涵盖了Jenkins的安装与配置流程,接着阐述了如何根据项目需求设定自动化编译任务,包括确定开发环境、选择合适的编译工具以及实现代码的自动更新等关键步骤。特别强调了在SVN环境中通过命令行实现代码自动拉取的最佳实践。 ... [详细]
  • JVM参数设置与命令行工具详解
    JVM参数配置与命令行工具的深入解析旨在优化系统性能,通过合理设置JVM参数,确保在高吞吐量的前提下,有效减少垃圾回收(GC)的频率,进而降低系统停顿时间,提升服务的稳定性和响应速度。此外,本文还将详细介绍常用的JVM命令行工具,帮助开发者更好地监控和调优JVM运行状态。 ... [详细]
  • Django框架下的对象关系映射(ORM)详解
    在Django框架中,对象关系映射(ORM)技术是解决面向对象编程与关系型数据库之间不兼容问题的关键工具。通过将数据库表结构映射到Python类,ORM使得开发者能够以面向对象的方式操作数据库,从而简化了数据访问和管理的复杂性。这种技术不仅提高了代码的可读性和可维护性,还增强了应用程序的灵活性和扩展性。 ... [详细]
  • 本文深入探讨了 HTML 中的 `margin` 属性,详细解析了其基本特性和应用场景。文章不仅介绍了 `margin` 的基本概念,还重点讨论了垂直外边距合并现象,并分析了 `margin` 在块级元素与内联元素中的不同表现。通过实例和代码示例,帮助读者全面理解 `margin` 的使用技巧和常见问题。 ... [详细]
  • 如果你对项目管理和系统架构感兴趣,欢迎关注微信订阅号“softjg”,加入我们这个PM和架构师的大家庭。本文将探讨编写高质量软件架构文档的重要性及其优势。良好的架构文档不仅能够促进不同利益相关者之间的沟通与理解,还能为项目的长期维护和扩展提供坚实的基础。通过详细记录系统的设计决策和关键组件,架构文档能够确保团队成员在项目周期内保持一致性和高效协作。 ... [详细]
  • 在Spring框架中,基于Schema的异常通知与环绕通知的实现方法具有重要的实践价值。首先,对于异常通知,需要创建一个实现ThrowsAdvice接口的通知类。尽管ThrowsAdvice接口本身不包含任何方法,但开发者需自定义方法来处理异常情况。此外,环绕通知则通过实现MethodInterceptor接口来实现,允许在方法调用前后执行特定逻辑,从而增强功能或进行必要的控制。这两种通知机制的结合使用,能够有效提升应用程序的健壮性和灵活性。 ... [详细]
  • 在使用关系型数据库时,通常需要通过用户名和密码进行身份验证才能访问数据。然而,MongoDB默认情况下并不强制要求这种身份验证机制,使得用户无需凭据即可访问并执行各种操作。虽然这一设计简化了初学者的上手过程,但也带来了显著的安全风险。为了提升MongoDB的连接安全性,本文将探讨多种策略与实践,包括启用身份验证、配置网络访问控制、加密通信以及定期审计安全设置,以确保数据库的安全性和数据的完整性。 ... [详细]
  • 在 Linux 系统中,`/proc` 目录实现了一种特殊的文件系统,称为 proc 文件系统。与传统的文件系统不同,proc 文件系统主要用于提供内核和进程信息的动态视图,通过文件和目录的形式呈现。这些信息包括系统状态、进程细节以及各种内核参数,为系统管理员和开发者提供了强大的诊断和调试工具。此外,proc 文件系统还支持实时读取和修改某些内核参数,增强了系统的灵活性和可配置性。 ... [详细]
  • SQLmap自动化注入工具命令详解(第28-29天 实战演练)
    SQL注入工具如SQLMap等在网络安全测试中广泛应用。SQLMap是一款开源的自动化SQL注入工具,支持12种不同的数据库,具体支持的数据库类型可在其插件目录中查看。作为当前最强大的注入工具之一,SQLMap在实际应用中具有极高的效率和准确性。 ... [详细]
author-avatar
叹号妈咪_790
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有