Use Initial Width for Element Not Working in Ie

use initial width for element not working in IE

Like you said, generally width: auto will have a similar effect. Having the rules:

.my-selector {
    width: auto;
    width: initial;
}

Should cause it to use initial if it's supported and auto otherwise.

IE body width not working

Use valid doctype like <!DOCTYPE HTML>

<!DOCTYPE HTML>
<style>
body {
margin: 0 auto;
width: 1000px;
}
</style>

<body>
SALALALLA
</body>

main element not working in Internet Explorer 11

The HTML5 main element is not supported by Internet Explorer (see browser support data).

You'll need to define main as a block-level element for width to work.

Make this adjustment:

main {
  display: block;  /* new */
  width: 200px;
}

Because the main element is not recognized by Internet Explorer – meaning it's not defined in IE's default style sheet – it uses CSS initial values (per the spec).

The initial value of the display property is inline.

The width property is ignored by inline elements. From the spec:

10.3.1 Inline, non-replaced
elements

The width property does not apply.

By defining the main element as a block-level element in author styles, the width property will work.

More details:

Default settings of unrecognized HTML elements
Default style sheet for HTML 4
main property browser compatibility
display property definition and initial value

max-width not working for IE 11

I think your problem is not coming from max-width but from main element...

The main element is not fully supported by IE11 (source).

2 solutions :

Change your <main> element to a <div>. Demo : http://jsfiddle.net/z4s01yxz/2/
Add main { display: block; } to your CSS. Demo : http://jsfiddle.net/z4s01yxz/1/

Div display:initial not working as intended in ie10 and chrome 29

initial does not mean "the default value of a given property for a given element". It means "the default value of a given property as defined by the spec". The initial value of display is inline, not block, as stated here. This is regardless of what sort of element you apply it to. And as already mentioned, IE does not support the initial keyword.

If you want an element to be displayed as a block, use display: block. If you want it to be displayed inline, use display: inline. If you want it to use whichever is the browser default for it, do not set the display property at all.

width: fit-content; working on Chrome but not explorer

width: fit-content is still in experimental stages, and is currently supported on Chrome 46.x and above (without vendor prefix), FF 3.x and above (with vendor prefix). Not supported on either IE or edge.

You can refer to compatibility chart here: Browser compatibility for width:fit-content

One alternative is to use display: table, which has the same effect as width: fit-content. Of course, there are other ways that you can try depending on what your requirements are.

#fit-content {

  width: fit-content;

  background: pink;

}

#table {

  display: table;

  background: lightblue;

}

#normal {

  background: green;

}

<div id="fit-content">

  <img src="https://upload.wikimedia.org/wikipedia/commons/d/d4/Wikipedesketch1.png"> fit-content

</div>

<div id="table">

  <img src="https://upload.wikimedia.org/wikipedia/commons/d/d4/Wikipedesketch1.png"> table

</div>

<div id="normal">

  <img src="https://upload.wikimedia.org/wikipedia/commons/d/d4/Wikipedesketch1.png"> normal

</div>

span width not properly setting in ie9 but working in ie 11

I tried debugging more and found out the issue. Width in span was set in span without unit.

<span style='width:100'></span>

it was causing the error. After changing it to

<span style='width:100px'></span>

it worked in ie9 and ie11 .

Thanks

Use Initial Width for Element Not Working in Ie