[MenuItem] MenuItem text is not correctly centered in IE11

[damir-sirola]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

MenuItem text is not vertically aligned

Expected Behavior 🤔

MenuItem text is vertically aligned

Steps to Reproduce 🕹

Steps:

1. Open https://material-ui.com/components/menus/ in IE11
2. Expand menu in any example

Context 🔦

Your Environment 🌎

Tech	Version
Material-UI	v4.4.0
React	16.9.0
Browser	IE11
TypeScript	3.5.3
etc.

[oliviertassinari]

@damir-sirola Thanks for the report, it comes from this weird IE 11 bug: philipwalton/flexbugs#231. What do you think of this fix? Do you want to submit a pull request? :)

diff --git a/packages/material-ui/src/MenuItem/MenuItem.js b/packages/material-ui/src/MenuItem/MenuItem.js
index f62a2cc9a5..9f771201a1 100644
--- a/packages/material-ui/src/MenuItem/MenuItem.js
+++ b/packages/material-ui/src/MenuItem/MenuItem.js
@@ -15,6 +15,13 @@ export const styles = theme => ({
     width: 'auto',
     overflow: 'hidden',
     whiteSpace: 'nowrap',
+    // Fix IE 11 issue (minHeight conflict)
+    '&:after': {
+      display: 'block',
+      content: '""',
+      fontSize: 0,
+      minHeight: 'inherit',
+    },
   },
   /* Styles applied to the root element if `disableGutters={false}`. */
   gutters: {

[paras151]

I am a beginner and havent contributed to open source , but would really love to , can anyone help please help me to get started in open source.I have good knowledge of html,css and basic backend web development

[joshwooding]

@paras151 Sure, it might be better to do this over pm on either Spectrum or Gitter. Have you read https://github.com/mui-org/material-ui/blob/master/CONTRIBUTING.md ?