Modernizr doesn't work for "column-count" in IE9
I added a link to the Modernizr JS file and put it class="no-js"
in the tag 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>
I am using a property column-count
in one of the CSS classes:
.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;
}
It looks good in Chrome, Firefox, IE 10+, but doesn't work in IE9.
I see what no-js
is being replaced by longer code in the browser, so I believe the JS link is correct. I've also added display: block
as described here . What could be the problem?
source to share
Internet Explorer 9 and below do not support column-count
; support was not added until version 10. It's important to remember that Modernizr mainly exists to help you learn what the browser is capable of, not to make the browser more capable. It does this by using special classes added to the document and having a global Modernizr
scripting object .
If you want to support CSS columns in Internet Explorer 9, you will need to do so via a different route. I suggest jQuery Columnizer as I've used it in the past, and it should come across as pretty familiar to anyone who understands CSS column syntax:
$( "html.no-csscolumns .listWithFlags" ).columnize( { columns: 3 } );
Base selector if present .no-csscolumns
will cause this script to only run on versions of Internet Explorer prior to 10. Alternatively, you could have used this global object earlier:
if ( !Modernizr.csscolumns ) {
$( ".listWithFlags" ).columnize( { columns: 3 } );
}
What's the point for you.
source to share
This doesn't work because IE9 doesn't support the property column-count
. See Can I use - number of columns .
I think you are misunderstanding what Modernizr does. It doesn't give you support for features the browser doesn't have (it supports multiple HTML5 elements). Taken directly from Modernizr Documentation
what Modernizr does is very simple, it tells you if the current browser has this feature implemented or not.
source to share