Question

我添加了对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引用是正确的。我还按照here的说明添加了display: block。可能是什么问题？

Answer 1

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状态会导致此脚本仅在10之前的Internet Explorer版本中运行。或者，您可以使用之前的全局对象：< / p>

if ( !Modernizr.csscolumns ) {
    $( ".listWithFlags" ).columnize( { columns: 3 } );
}

无论哪个对你有意义。

Answer 2

它不起作用，因为IE9不支持column-count属性。请参阅Can I Use - column-count。

我认为你误读了Modernizr实际上做的事情。它不支持浏览器没有的功能（它确实提供了对一些HTML5元素的支持）。直接来自Modernizr's Documentation

Modernizr所做的是，非常简单地告诉您当前浏览器是否具有本机实现的功能。

Modernizr不适用于IE9中的“列数”

2 个答案: