IE 11 developer tools does not show width of an element

Question

IE 11 developer tools displays "auto" instead of actual width unlike previous editions. Is it possible to do this also in ie 11?

Answer 1

In Developer view (IE 11) on the upper menu bar, on the right side, there is an icon with displays called Document Mode Emulated and an arrow beside it. Click on the arrow and try to choose another version from drop down menu. By default, for me, it was set to version 5, so I switched it to Edge and it was working. I was able to see real dimensions for selected HTML elements.

Answer 2

1. Right click on the element, and choose Inspect Element. You can also just open Dev Tools using F12.
2. On the "Dom Explorer" Tab, in the sidebar, find the "Layout" tab (see screenshot).
3. The "Layout" tool shows the dimensions of the element including width and height of the native element, the padding applied to it, the border, the margin, and the offset.

IE 11 Dev Tools, DOM Explorer, Layout View

Answer 3

The F12 dev tools in IE11 shows auto for width when you specify it as such, as it is showing the specified styles. This matches what other tools do, such as the Chrome Dev Tools and Safari Web Inspector.

If you’d like to see the actual computed width, you can switch to the “computed” tab in the sidebar and look for the width there (or type it in the filter field), or you can also see it in the box model diagram in the “layout” tab.