常见css hack有三种:1、条件hack,语法“”;2、属性前缀hack,语法“selector{
?属性名:属性值 ?;}”;3、选择器前缀hack,语法“ selector{ 样式代码 }”。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
CSS hack 是通过在 CSS 样式中加入一些特殊的符号,让不同的浏览器识别不同的符号 (什么样的浏览器识别什么样的符号是有标准的,CSS hack 就是让你记住这个标准),,以达到应用不同的 CSS 样式的目的。
CSS hack 是因为现有浏览器对标准的解析不同,为了兼容各浏览器,所采用的一种补救方法.。为了兼容低版本浏览器器的 CSS 解析 BUG,不得不把代码写的很绕, 直接增加了维护成本。
CSS hack 是一种类似作弊的手段, 以欺骗浏览器的方式达到兼容的目的, 是用浏览器的兼容性差异来解决浏览器的兼容性问题。
常用的css hack有三种:条件hack、属性hack、选择符hack
1、条件hack
语法:
<!--[if <keywords>? IE <version>?]> HTML代码块 <![endif]-->
取值:
if条件共包含6种选择方式:是否、大于、大于或等于、小于、小于或等于、非指定版本
- 是否:指定是否IE或IE某个版本。关键字:空
- 大于:选择大于指定版本的IE版本。关键字:gt(greater than)
- 大于或等于:选择大于或等于指定版本的IE版本。关键字:gte(greater than or equal)
- 小于:选择小于指定版本的IE版本。关键字:lt(less than)
- 小于或等于:选择小于或等于指定版本的IE版本。关键字:lte(less than or equal)
非指定版本:选择除指定版本外的所有IE版本。关键字:!
如不想在非IE中看到某区域,可这样写:
<!--[if IE]> <p>你在非IE中将看不到我的身影</p> <![endif]-->
if条件6种选择方式的使用示例
是否,示例代码:
<!--[if IE]> <style> .test{color:red;} </style> <![endif]-->
大于,示例代码:
<!--[if gt IE 6]> <style> .test{color:red;} </style> <![endif]-->
大于或等于,示例代码:
<!--[if gte IE 6]> <style> .test{color:red;} </style> <![endif]-->
小于,示例代码:
<!--[if lt IE 7]> <style> .test{color:red;} </style> <![endif]-->
小于或等于,示例代码:
<!--[if lte IE 7]> <style> .test{color:red;} </style> <![endif]-->
非指定版本,示例代码:
<!--[if ! IE 7]> <style> .test{color:red;} </style> <![endif]-->
2、属性前缀hack
语法:selector{
取值:
_:选择IE6及以下。连接线(中划线)(-)亦可使用,为了避免与某些带中划线的属性混淆,所以使用下划线(_)更为合适。
*:选择IE7及以下。诸如:(+)与(#)之类的均可使用,不过业界对(*)的认知度更高
\9:选择IE6+
\0:选择IE8+和Opera
[;property:value;];:选择webkit核心浏览器(Chrome,Safari)。IE7及以下也能识别。中括号内外的3个分号必须保留,第一个分号前可以是任意规则或任意多个规则[;color:#f00;]; 与 [color:#f00;color:#f00;]; 与 [margin:0;padding:0;color:#f00;]; 是等价的。生效的始终是中括号内的最后一条规则,所以通常选用第一种写法最为简洁。
说明:
选择不同的浏览器及版本
- 尽可能减少对CSS Hack的使用。Hack有风险,使用需谨慎
- 通常如未作特别说明,本文档所有的代码和示例的默认运行环境都为标准模式。
一些CSS Hack由于浏览器存在交叉认识,所以需要通过层层覆盖的方式来实现对不同浏览器进行Hack的。如下面这个例子:
.test{ color:#090\9; /* For IE8+ */ *color:#f00; /* For IE7 and earlier */ _color:#ff0; /* For IE6 and earlier */ }
3、选择器前缀hack
语法:
说明:
选择不同的浏览器及版本
- 尽可能减少对CSS Hack的使用。Hack有风险,使用需谨慎
- 通常如未作特别说明,本文档所有的代码和示例的默认运行环境都为标准模式。
- 一些CSS Hack由于浏览器存在交叉认识,所以需要通过层层覆盖的方式来实现对不同浏览器进行Hack的。
* html .test{color:#090;} /* For IE6 and earlier */ * + html .test{color:#ff0;} /* For IE7 */ .test:lang(zh-cn){color:#f00;} /* For IE8+ and not IE */ .test:nth-child(1){color:#0ff;} /* For IE9+ and not IE */
(学习视频分享:web前端入门)
The above is the detailed content of What are the common css hacks?. For more information, please follow other related articles on the PHP Chinese website!

在css中,可用list-style-type属性来去掉ul的圆点标记,语法为“ul{list-style-type:none}”;list-style-type属性可设置列表项标记的类型,当值为“none”可不定义标记,也可去除已有标记。

区别是:css是层叠样式表单,是将样式信息与网页内容分离的一种标记语言,主要用来设计网页的样式,还可以对网页各元素进行格式化;xml是可扩展标记语言,是一种数据存储语言,用于使用简单的标记描述数据,将文档分成许多部件并对这些部件加以标识。

在css中,可以利用cursor属性实现鼠标隐藏效果,该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状,当属性值设置为none时,就可以实现鼠标隐藏效果,语法为“元素{cursor:none}”。

在css中,rtl是“right-to-left”的缩写,是从右往左的意思,指的是内联内容从右往左依次排布,是direction属性的一个属性值;该属性规定了文本的方向和书写方向,语法为“元素{direction:rtl}”。

转换方法:1、给英文元素添加“text-transform: uppercase;”样式,可将所有的英文字母都变成大写;2、给英文元素添加“text-transform:capitalize;”样式,可将英文文本中每个单词的首字母变为大写。

在css中,可以利用“font-style”属性设置i元素不是斜体样式,该属性用于指定文本的字体样式,当属性值设置为“normal”时,会显示元素的标准字体样式,语法为“i元素{font-style:normal}”。

在css3中,可以用“transform-origin”属性设置rotate的旋转中心点,该属性可更改转换元素的位置,第一个参数设置x轴的旋转位置,第二个参数设置y轴旋转位置,语法为“transform-origin:x轴位置 y轴位置”。

css可以取消横向滚动条,只需要给滚动条的父元素添加overflow-x属性,并将属性值设为“hidden”即可,语法为“父元素{overflow-x: hidden;}”;该方法可以设置当内容溢出左或右边缘时不提供滚动机制,直接裁剪内容。


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.

EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function

Dreamweaver Mac version
Visual web development tools

Notepad++7.3.1
Easy-to-use and free code editor

VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft
