更改不同浏览器的 CSS答案

【问题标题】：Change CSS for different browsers更改不同浏览器的 CSS
【发布时间】：2013-09-13 21:51:26
【问题描述】：

我只是想知道如果在不同的浏览器中查看，是否可以更改一些 CSS。

例如，我将这个特殊的 CSS 用于 flexbox div：

.wdFlex {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-moz-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
-webkit-box-align: center;
-moz-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}

它在 Chrome、Safari、Firefox、IE10+ 等中运行良好，但如您所知，IE9 不支持 flexbox。现在，我可以在普通的 CSS 中做 flexbox 所做的事情，但现在我只想学习一些 flexbox 的东西并尝试一下。但是ofc，在我看来应该支持IE9，所以我的问题是，如果有什么办法，不用通过以下方式更改整个css文件：

<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->

改变css？

就像上面 CSS 中没有 flexbox 的东西一样，它只是写了，如果 IE9：

.wdFlex {
display: inline-block;

}

举个例子。

希望你明白我的意思:)

提前致谢。

【问题讨论】：

这只能使用 Javascipt 来完成。使用 HTML 或 CSS 是不可能的。
webdesignerwall.com/tutorials/…

标签： html css browser internet-explorer-9 flexbox

【解决方案1】：

您可以利用 CSS 级联，因此如果浏览器不支持该属性，您可以编写回退。

.wdflex {
    display: inline-block; /* for IE9 */
    display: flex-box; /* browsers that support it will pick it up */
}

对于这个特定的示例，您可以使用条件 cmets 将特定于浏览器的类应用于标记中的 html 标记，如下所示：

<!DOCTYPE html>
    <!--[if IE 9]><html class="ie9"> <![endif]-->
    <!--[if IE 10]><!--> <html class="ie10"> <!--<![endif]-->

显然可以用它编写更多类并做更复杂的事情，但你明白了。然后只需在类上写css。这篇文章更详细地介绍了这种技术，特别是处理显示：flex http://designkarma.co.uk/blog/using-flexbox-now

【讨论】：