Question

我只是想知道如果在不同的浏览器中查看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的东西并尝试一下。但是在我看来，应该支持IE9，所以我的问题是，如果有任何办法，不通过以下方式更改整个css文件：

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

更改css？

就像上面的CSS中的flexbox一样，它只是写出来，如果是IE9：

.wdFlex {
display: inline-block;

}

作为一个例子。

希望你理解我的意思:)。

提前致谢。

Answer 1

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

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

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

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

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

更改不同浏览器的CSS

1 个答案: