我添加了对 Modernizr JS 文件的引用，并将 class="no-js" 放在 html 标记中。
<html lang="en" class="no-js">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title><%: Page.Title %></title>
<script src="Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<webopt:bundlereference runat="server" path="~/Content/css" />
<link href="App_Themes/MetroTouchCountries/TabStrip.MetroTouchCountries.css" rel="stylesheet" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<script src="Scripts/modernizr.custom.61385.js"></script>
</head>
我在一个 CSS 类中使用 column-count 属性:
.listWithFlags {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
font-family: Calibri, Verdana;
font-size:14px;
line-height:13px;
display: block;
}
它在 Chrome、Firefox、IE 10+ 上看起来不错，但在 IE9 中不起作用。
我看到 no-js 在浏览器中被替换为更长的代码，所以我认为 JS 引用是正确的。我还按照说明添加了 display: block here .可能是什么问题？
最佳答案
Internet Explorer 9 及以下版本不支持 column-count ;直到版本 10 才添加支持。重要的是要记住，Modernizr 的存在主要是为了帮助您了解浏览器的功能，而不是让浏览器具备更多功能。 It does this via special classes added to the document, and the presence of a global Modernizr object for scripting purposes .
如果您想在 Internet Explorer 9 中支持 CSS 列，则需要通过其他途径实现。我会建议 jQuery Columnizer正如我过去使用过的那样，精通 CSS Column 语法的任何人都应该对它相当熟悉:
$( "html.no-csscolumns .listWithFlags" ).columnize( { columns: 3 } );
将选择器基于 .no-csscolumns 的存在将导致此脚本仅在 Internet Explorer 10 之前的版本中运行。或者，您可以使用之前的全局对象:
if ( !Modernizr.csscolumns ) {
$( ".listWithFlags" ).columnize( { columns: 3 } );
}
无论你觉得什么。
关于css - Modernizr 不适用于 IE9 中的 "column-count"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26677119/