CSS Hack 的使用

最新推荐文章于 2022-04-07 17:03:37 发布

一碗周.

最新推荐文章于 2022-04-07 17:03:37 发布

阅读量2.2k

点赞数

分类专栏：随手小记文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_46163658/article/details/112394841

版权

随手小记专栏收录该内容

27 篇文章 3 订阅

订阅专栏

写在前面

虽然 IE 浏览器已经被微软放弃了，但是避免不了某些项目的 CSS 还是要兼容 IE 浏览器，CSS Hack 还是有必要看一眼的，于是就出现了这篇博文，这篇博客主要介绍 CSS Hack 是什么。

文章目录

CSS Hack是什么

CSS Hack 由于不同厂商的浏览器，比如 Internet Explorer、Safari、 Moilla Firefox、Chrome 等,或者是同一厂商的浏览器的不同版本，如 IE 6 和 IE 7 ,对 CSS 的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到所需要的页面效果。这个时候就需要针对不同的浏览器去写不同的 CSS ,让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到想要的页面效果。简单的说，CSS Hack 的目的就是使CSS 代码兼容不同的浏览器。当然，也可以反过来利用 CSS Hack 为不同版本的浏览器定制编写不同的 CSS 效果。

Browserhacks 这是一个拥有众多 Hack 的一个网站，关于各个浏览器的 Hack，复制即用

CSS Hack的分类

CSS Hack大致有三种表现形式：

CSS属性前缀法
选择器前缀法
IE条件注释法

CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。

CSS属性前缀法

属性前缀法是在 CSS 样式属性名前加上一些只有特定浏览器才能识别的 Hack 前缀，以达到预期的页面展现效果。

IE浏览器各版本 CSS Hack 对照表:

Hack	写法	IE6(S)	IE6(Q)	IE7(S)	IE7(Q)	IE8(S)	IE8(Q)	IE9(S)	IE9(Q)	IE10(S)	IE10(Q)
`*`	`*color`	Y	Y	Y	Y	N	Y	N	Y	N	Y
`+`	`+color`	Y	Y	Y	Y	N	Y	N	Y	N	Y
`-`	`-color`	Y	Y	N	N	N	N	N	N	N	v
`_`	`_color`	Y	Y	N	Y	N	Y	N	Y	N	N
`#`	`#color`	Y	Y	Y	Y	N	Y	N	Y	N	Y
`\0`	`color:red\0`	N	N	N	N	Y	N	Y	N	Y	N
`\9\0`	`color:red\9\0`	N	N	N	N	N	N	Y	N	Y	N
`!important`	`color:red !important;`	N	N	Y	N	Y	N	Y	N	Y	Y

选择器前缀法

选择器前缀法是针对一频面表现不-致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行Hack。

*html: *前缀只对 IE6 生效
*+html: *+前缀只对 IE7 生效
@media screen\9{.}: 对 IE6/7 生效
@media \l0screen {body { background: red; }}: 只对 IE8 有效
@media \lOscreen\,screen\9{body { background: blue; }}: 只对 IE6/7/8 有效
@media screen\0 {body { background: green; }}: 只对 IE8/9/10 有效
@media screen and (min-width:0\0) {body { background: gray; }}: 只对 IE9/10 有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body{ background: orange; }}: 只对 IE10 有效

IE条件注释法

这种方式是IE浏览器专有的Hack方式，微软官方推荐使用的Hack方式。

只在IE下生效

<!--[if IE]>这段文字只在E浏览器示<![endif]}-->

只在IE6下生效.

<!--[if IE 6]>这段文字只在IE6浏览器显示<![endif]-->

只在IE6以上版本生效

<!--[if gte IE 6]>这段文字只在IE6以上(包括)版本E浏览器显示<![endif]-->

只在IE8上不生效

<!--[if !IE 8]>这段文字在非IE8浏览器显示<![endif]-->

非IE浏览器生效

<!--if !IE]>这段文字只在非IE浏览器显示<![endif]-->

使用 CSS 库完成浏览器兼容性问题

Normalize.css 是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一。

Normalize.css 能干什么：

保留有用的默认值，不同于许多 CSS 的重置
标准化的样式，适用范围广的元素。
纠正错误和常见的浏览器的不一致性。
一些细微的改进，提高了易用性。
使用详细的注释来解释代码。

支持的浏览器：

Google Chrome (latest)
Mozilla Firefox (latest)
Mozilla Firefox ESR
Opera (latest)
Apple Safari 6+
Internet Explorer 8+

CSS代码

/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. 修正所有浏览器中的行高.
 * 2. 在iOS的切换横竖屏时，防止字体大小的调整.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * 删除所有浏览器的margin值。
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 * 修正h1元素的font-size和margin值
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 * 1.修正火狐浏览器的box-sizing
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 1. 在所有浏览器中纠正字体大小的继承和扩展。
 * 2. Correct the odd `em` font sizing in all browsers.
 * 2. 在所有浏览器中纠正奇数的字体大小。
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics：文本级别的语义
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 * 删除IE 10中活跃链接的灰色背景。
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 1. 移除Chrome 57-浏览器的border-bottom
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 * 2. 在Chrome、Edge、IE、Opera和Safari中添加正确的text-decoration。
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 * 在Chrome、Edge和Safari中添加正确的font-weight
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 1.在所有浏览器中纠正字体大小的继承和扩展。
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 * 防止“sub”和“sup”元素影响所有浏览器的线高度。
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content：嵌入命令
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 在Edge、Firefox和IE中删除文本转换的继承。
 * 1. Remove the inheritance of text transform in Firefox.
 * 1. 删除Firefox中文本转换的继承。
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 * 纠正在iOS和Safari中无法使用可点击类型的功能。
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 * 移除Firefox中border和padding
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 * 恢复以前规则未设置的焦点样式。
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 * 修正火狐的padding值
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 1. 
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 2. 从IE的“fieldset”元素中纠正颜色继承。
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 * 3.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 * 在Chrome、Firefox和Opera中添加正确的垂直对齐方式。
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 * 删除IE 10+中的默认垂直滚动条
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 1. 修正IE10中的box-sizing
 * 2. Remove the padding in IE 10.
 * 2. 移除IE10的padding值
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 * 修正Chrome中增加和减量按钮的光标样式。
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 1. 修正在Chrome和Safari中出现的奇怪现象。
 * 2. Correct the outline style in Safari.
 * 2. 修正Safari中的outline样式
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 * 移除chrome和macos上的Safari的padding值
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 1. 纠正在iOS和Safari中无法使用可点击类型的功能。
 * 2. Change font properties to `inherit` in Safari.
 * 2. 在Safari中更改字体属性，以“inherit”。
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive：交互式的
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 * 修正Edge, IE 10+,和 Firefox中details标签的display属性
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 * 修正所有浏览器的display属性
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 * 修正IE10+的template元素的display
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 * 修正IE 10中的display
 */

[hidden] {
  display: none;
}

一碗周.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS Hack 的使用

写在前面虽然 IE 浏览器已经被微软放弃了，但是避免不了某些项目的 CSS 还是要兼容 IE 浏览器，CSS Hack 还是有必要看一眼的，于是就出现了这篇博文，这篇博客主要介绍 CSS Hack 是什么。文章目录写在前面CSS Hack是什么CSS Hack的分类CSS属性前缀法选择器前缀法IE条件注释法使用 CSS 库完成浏览器兼容性问题CSS Hack是什么CSS Hack 由于不同厂商的浏览器，比如 Internet Explorer、Safari、 Moilla Firefox、Chrom
复制链接

扫一扫