Question

网页为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。请帮忙。

Answer 1

IE9并不支持flexbox（see here获取完整的浏览器支持详情），因此您需要使用类似于IE9的IE7 / 8替代布局。

您可以通过以下几种方式之一在没有IE9的条件CSS的情况下工作：

使用CSS的覆盖机制。只需在同一个选择器中指定display:inline-block以上display:flex（等），每个浏览器都会选择他们支持的最后定义的选项。因此，如果flex低于inline-block，则IE9将使用inline-block，因为它不了解flex，而其他人则会使用flex，因为他们知道inline-block它和width之下。当然，这并不是设置width，但我们已经解决了一半的问题而没有任何特定于浏览器的代码（事实上，这也适用于IE7 / 8，所以你也可以减少他们的特定代码）。通过在rem或vmin之类的旧浏览器中使用不支持的度量单位指定默认值，然后使用{{1}覆盖它，%可能通过类似技巧解决对于较旧的浏览器，但这是否适合您将取决于您的实际布局。
使用Modernizr等库，它将添加您可以在<body>标记上以类名的形式使用的功能支持标记。例如，它会为支持它的浏览器添加flexbox类，为不支持的浏览器添加no-flexblox类。这意味着您可以编写针对支持该功能的浏览器的CSS代码 - 例如：

.flexbox #primary { 显示：弯曲; //等等... } .no-flexbox #primary { 显示：内联块; 宽度：70％; }
使用浏览器黑客。我真的不喜欢暗示这一点，但这是一个选择。如果你真的想使用它们，有专门针对IE9的CSS黑客。我不会在这里重复这些，但我认为这不是最好的选择。如果您想使用它们，Google会告诉您需要了解的内容。
使用IE9特定的类，就像您目前用于IE7和IE8一样。你已经这样做了，所以它看起来不应该太过分了。
全面使用inline-block。如果inline-block布局有效，为什么不使用它。 Flexbox非常棒，但如果您需要IE7 / 8/9支持，那么您将无法始终如一地使用它，那么......？

就个人而言，我会选择Modernizr解决方案。它非常巧妙地解决了这个问题，并且还可以处理大多数其他因为缺少功能而可能考虑使用特定于浏览器的样式的情况。

IE9的Wordpress自定义页面CSS问题

1 个答案: