网页是http://www.parentcenterhub.org/region6-aboutus/ 它在除 IE9 之外的所有浏览器上都能正常显示。 CSS 是：
#primary { display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex; }
ie 7和ie 8的条件css是：
.ie8 .content-area1{
width: 70%;
display: inline-block; }
.ie7 .content-area1{
width: 70%;
display: inline-block; }
IE9 没有条件 css 文件。所以，请建议我可以放在 style.css 中的代码，以便页面也能正确显示 IE9。请帮忙。
【问题讨论】：
标签： css wordpress internet-explorer
IE9 并且不支持 flexbox（see here 了解完整的浏览器支持详情），因此您需要使用类似 IE7/8 的替代布局来支持 IE9。
您可以通过以下几种方式之一在没有 IE9 条件 CSS 的情况下工作：
使用 CSS 的覆盖机制。只需在同一选择器中指定display:inline-block 上方的display:flex （等），每个浏览器都会选择它们支持的最后一个定义的选项。因此，如果flex 低于inline-block，IE9 将使用inline-block，因为它不理解flex，而其他人将使用flex，因为他们知道它并且低于inline-block。当然，这不涉及设置width，但我们已经解决了一半的问题，而无需任何特定于浏览器的代码（事实上，这也适用于 IE7/8，因此您可以减少您的特定他们的代码）。 width 可能可以通过类似的技巧来解决，方法是使用旧版浏览器不支持的测量单位（如 rem 或 vmin 或其他东西）指定默认值，然后为旧版浏览器使用 % 覆盖它，但是是否是否适合您取决于您的实际布局。
使用诸如Modernizr 之类的库，它将添加功能支持标志，您可以在<body> 标记上以类名的形式使用这些标志。例如，它将为支持它的浏览器添加一个flexbox 类，为不支持它的浏览器添加一个no-flexblox 类。这意味着您可以编写针对支持或不支持该功能的浏览器的 CSS 代码——例如：
.flexbox #primary { 显示：弹性； //等等... } .no-flexbox #primary { 显示：内联块； 宽度：70%； }
使用浏览器破解。我真的不喜欢这样建议，但这是一种选择。如果您真的想使用它们，有专门针对 IE9 的 CSS hack。我不会在这里重复它们，因为我认为这不是最好的选择。如果您想使用它们，Google 会告诉您您需要了解的内容。
使用特定于 IE9 的类，就像当前用于 IE7 和 IE8 一样。你已经在做，所以看起来应该不会太费力。
只需全面使用inline-block。如果inline-block 布局有效，为什么不直接使用它。 Flexbox 很棒，但是如果您需要 IE7/8/9 支持，您将无法始终如一地使用它，所以....？
就个人而言，我会选择 Modernizr 解决方案。它非常巧妙地解决了这个问题，并且还可以处理由于缺少功能而可能考虑使用特定于浏览器的样式的大多数其他情况。
【讨论】：