问题描述
在使用 LESS 编写样式时，我们经常会使用 flex 布局或者 margin:auto 居中元素。但是在 IE 浏览器中，这些居中方式可能会失效，导致页面布局出现问题。
解决方案
方案一：使用 IE Hack
IE Hack 是指为了解决 IE 浏览器兼容性问题而使用的一些特殊 CSS 属性或者选择器。下面介绍两种常见的 IE Hack：
1. 使用 * 属性选择器
在 IE6/7 中，使用 * 属性选择器可以匹配所有的元素，因此我们可以利用这个特性来实现居中效果。
.parent {
text-align: center;
}
.child {
display: inline-block;
*display: inline;
*zoom: 1;
}在上述代码中，我们将子元素的 display 属性设置为 inline-block，然后使用 *display: inline 和 *zoom: 1 来解决 IE6/7 中无法识别 inline-block 属性的问题。
2. 使用 \9 属性后缀
在 IE6/7/8 中，我们可以使用 \9 属性后缀来实现 CSS 兼容性。
-- -------------------- ---- ------- ------- - -------- ----- ---------------- ------- ------------ ------- -- ------- -- -------- -------- ----------- --------- - ------ - -- ------- -- -------- --------------- ----- ---- -
在上述代码中，我们使用了 \9 属性后缀来兼容 IE6/7/8 中无法识别 flex 属性的问题。
方案二：使用 CSS Hack
CSS Hack 是指为了解决浏览器兼容性问题而使用的一些特殊 CSS 语法。下面介绍两种常见的 CSS Hack：
1. 使用 IE Hack
在 IE 浏览器中，我们可以使用条件注释来实现 CSS Hack。
-- -------------------- ---- -------
------- ----
-------
------- -
----------- -------
-
------ -
-------- -------------
--------- -------
------ --
-
--------
------------在上述代码中，我们使用了条件注释来判断浏览器是否为 IE，如果是，就引入特定的 CSS 样式。
2. 使用属性前缀 Hack
在某些浏览器中，我们可以使用特定的属性前缀来实现 CSS Hack。
-- -------------------- ---- ------- ------- - -------- ----- ---------------- ------- ------------ ------- -- ------ -------- -- -------- ------------- ------------------------ ------- -------------------- ------- -- ------- -- -------- --------- -------------- ------- --------------- ------- - ------ - -- ------ -------- -- -------- ------------------- -- ------- -- -------- ---------------- -
在上述代码中，我们使用了 -webkit- 和 -moz- 前缀来实现 Safari 和 Firefox 浏览器中的兼容性。
总结
在开发中，我们经常会遇到浏览器兼容性问题。针对这些问题，我们可以使用 IE Hack 或者 CSS Hack 来解决。但是需要注意的是，Hack 是一种不规范的做法，不推荐在正式项目中使用。我们应该尽可能地使用标准的 CSS 属性和语法，遵循 Web 标准，保证页面的兼容性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66265fa1c9431a720c2ced32