Internet Explorer 8 with browser mode "IE8 compatibility"

On Internet Explorer 8 with manually activated compatibility mode "Internet Explorer 8 compatibility" the edit textarea #wpTextbox1 has the right width.

Attached:

Internet Explorer 8 with browser mode "IE8" without IE80Fixes.css

When I empty the file skins/common/IE80Fixes.css the edit textarea #wpTextbox1 has on Internet Explorer 8 with the default compatibility mode "Internet Explorer 8" the right width.

Attached:

Internet Explorer 8 with browser mode "IE8 compatibility" without IE80Fixes.css

When I empty the file skins/common/IE80Fixes.css and activate manually the compatibility mode "Internet Explorer 8 compatibility" the edit textarea #wpTextbox1 is to wide.

Attached:

commonContent.css has a

#editform textarea {

display: block;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

}

which is interpreted in IE8, and might cause this behavior. So adding a

box-sizing: content-box;

in IE80Fixes.css might fix this.

(In reply to comment #4)

So adding a

box-sizing: content-box;

in IE80Fixes.css might fix this.

No. box-sizing: content-box is the default value. box-sizing: border-box is here the correct value to generate a textarea with a width of 100% including padding and border.

The CSS property box-sizing is supported in Internet Explorer since version 8: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing In compatibility mode the Internet Explorer 8 seams to ignore the property box-sizing for compatibility.

The definition in IE80Fixes.css disturbs the correct working Internet Explorer 8 in the default standard compliance mode. In attachment 14343 you can see that the width of the box is correct when IE80Fixes.css is empty. But an empty IE80Fixes.css generates a overflowing box in compatibility mode of Internet Explorer 8. Maybe it is not possible to fix in both modes.

WikiEditor avoids the problem by using
.wikiEditor-ui textarea#wpTextbox1 {

border-left: none;
boder-right: none;
padding-left: 0;
padding-right: 0;

}
so content-box and border-box has the same width.

IE80Fixes.css is supposed to fix the bug 19334. I can not reproduce the problems described in bug 19334. I think the workaround in IE80Fixes.css generates more problems than it solves problems.

CC-ing author of the hack.

Change 109660 had a related patch set uploaded by Gerrit Patch Uploader:
Remove IE80Fixes.css

https://gerrit.wikimedia.org/r/109660

Thanks!

Change 109660 merged by jenkins-bot:
Remove IE80Fixes.css

https://gerrit.wikimedia.org/r/109660