CSS needs cross-browser work

[Nettsentrisk]

In IE10, the default CSS does not make it look like in other browsers, the window is either the same width as the entire window, or it is left-aligned when it's centered in other browsers.

[ffuubarbuzz]

I guess this is caused by lack of support for width: fit-content by IE: https://developer.mozilla.org/en-US/docs/Web/CSS/width I have one more issue with IE10:

Unable to get property 'length' of undefined or null reference 
dialog-polyfill.js, line 82 character 25

[agektmr]

Do you have any idea how to set a block element centered on IE without adding any DOM?

[Garbee]

I've been working on centering in IE for the Material Design Lite Dialog component. The only way I have found is, set a direct width, position absolute (fixed/static maybe as well) and then margin auto the left and right.

IE will not center anything with a variable width from all the testing I've done. Edge however, it works perfectly.

[samthor]

I wonder if this could be fixed in at least IE10 with its flexbox support.

Also, doesn't IE9-10 support this?

<div style="margin: 0px auto; display: inline-block; background-color: blue;">Test</div>

[xfra35]

What about a combination of transform and display: table? See: https://jsbin.com/cufavugosa/1/edit?html,css,output Works on Edge, IE11-10 and even IE9 with -ms- prefix.

[samthor]

It's not really ideal because many folks want to restyle or move the <dialog> around the page, and adding more CSS that they might then have to override, might be frustrating.

But I accept that there's not really many better options right now.

[Garbee]

Would it be appropriate to have a class to modify the styles for IE? Clearly not meaning it is a direct "polyfill" then since specs don't have classes. But for people who need IE support they can opt in to those rule changes as-needed. Without it being forced on people already using the system in production.