Modernizr不适用于IE9中的"列数"

Question

Modernizr不适用于IE9中的"列数"

Ned*_*Ned 3 css3 internet-explorer-9 modernizr

我添加引用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>

Run Code Online (Sandbox Code Playgroud)

我column-count在一个CSS类中使用属性:

.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;
}

Run Code Online (Sandbox Code Playgroud)

它在Chrome,Firefox,IE 10+上看起来不错,但在IE9中不起作用.

我看到no-js在浏览器中用更长的代码替换了所以我认为JS引用是正确的.我还补充display: block说,这里解释.可能是什么问题呢？

Answer 1

Sam*_*son 7

Internet Explorer 9及更低版本不支持column-count; 直到版本10都没有添加支持.重要的是要记住,Modernizr主要用于帮助您了解浏览器的功能,而不是让浏览器具备更多功能.它通过添加到文档中的特殊类以及Modernizr用于编写脚本的全局对象的存在来实现此目的.

如果您想在Internet Explorer 9中支持CSS列,则需要通过其他路由来支持.我建议使用jQuery Columnizer,因为我过去曾经使用它,对于精通CSS Column语法的人来说,它应该是相当熟悉的:

$( "html.no-csscolumns .listWithFlags" ).columnize( { columns: 3 } );

Run Code Online (Sandbox Code Playgroud)

基于存在的选择器.no-csscolumns将导致此脚本仅在10之前的Internet Explorer版本中运行.或者,您可以使用之前的全局对象:

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

Run Code Online (Sandbox Code Playgroud)

哪个对你有意义.

归档时间：	11 年前
查看次数：	2366 次
最近记录：	11 年前