How to Display CSS3 Columns on Ie

How to display CSS3 columns on IE?

Pragmatic Programmer's HTML5 and CSS3 book has some great advice on stuff like this. For columns, it recommends using the Columnizer Plugin for jQuery for IE.

3 column output for IE 8 using CSS

CSS3 columns are not supprted in IE8. You will be able to do this using divs however this will only be effective if your content is static.

For example:

<div style="overflow:hidden;">
    <div style="float:left; width:33%;">first third of content</div>
    <div style="float:left; width:33%;">second third of content</div>
    <div style="float:left; width:33%;">third third of content</div>
</div>

For dynamic content you will have to use javascript. I've came across this jQuery plugin online - it should do what you need.

$('#mydiv').columnize({ width: 200 , columns: 3 });

How to fix CSS3 column-count for IE?

Multi-column layout is not supported by Internet Explorer, even version 9. However, current versions of Chrome, Firefox, Safari and Opera all handle CSS3 multi-column layout without a problem.

If you need to support browsers that don't have multi-column support, then you should have a fallback option for those browsers. Here is how you can do it with the Modernizr script

Place the following SCRIPT tag in your HEAD after any other style sheets:

<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.0.6/modernizr.min.js"></script>

Add another SCRIPT below the above line that reads:

<script>
Modernizr.load({
  test: Modernizr.csscolumns,
  yep: 'columns.css',
  nope: 'no-columns.css'
});
</script>

Create a CSS style sheet that includes your multi-columns CSS and save it as columns.css in the same directory.

Create a CSS style sheet that contains your fallback CSS (such as columns with float) and save it as no-columns.css in the same directory.

I found a article on this: Read this

and here already a answer available for that : Question

multi columns not working in ie 11

Setting the style overflow: hidden; on the li tags seems to resolve this issue.

css column count ignored on IE11

<main> tag is not supported by IE. It only is supported by Firefox + Chrome + Edge:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main

That's the reason why it doesn't work with columns.

How to implement CSS Grid in IE11?

As IE doesn't support grids well, you have to define grid columns to display the image properly.
Try this

.parent{
display: grid;
display: -ms-grid;
grid-template-columns: 1fr 1fr;
-ms-grid-columns: 1fr 1fr;
}
.image1{
grid-column: 1;
-ms-grid-column: 1;
-ms-grid-row: 1;
}
.image2{
grid-column: 2;
-ms-grid-column: 2;
-ms-grid-row: 1;
}

<div class="parent">
<img class="image1" src="https://www.w3schools.com/howto/img_forest.jpg" alt="ex" />
<img class="image2" src="https://www.w3schools.com/howto/img_forest.jpg" alt="ex2" />
</div>

---

Related Topics