Fix Tabs in IE9, close #4795

components/_util/isFlexSupported.tsx

@@ -0,0 +1,10 @@
+export default function isFlexSupported() {
+  if (typeof window !== 'undefined' && window.document && window.document.documentElement) {
+    const { documentElement } = window.document;
+    return 'flex' in documentElement.style ||
+      'webkitFlex' in documentElement.style ||
+      'Flex' in documentElement.style ||
+      'msFlex' in documentElement.style;
+  }
+  return false;
+}

components/tabs/index.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import { cloneElement } from 'react';
+import { findDOMNode } from 'react-dom';
 import RcTabs, { TabPane } from 'rc-tabs';
 import ScrollableInkTabBar from 'rc-tabs/lib/ScrollableInkTabBar';
 import TabContent from 'rc-tabs/lib/TabContent';
 import classNames from 'classnames';
 import Icon from '../icon';
 import warning from '../_util/warning';
+import isFlexSupported from '../_util/isFlexSupported';
 
 export type TabsType = 'line' | 'card' | 'editable-card'
 export type TabsPosition = 'top' | 'right' | 'bottom' | 'left';
@@ -69,6 +71,14 @@ export default class Tabs extends React.Component<TabsProps, any> {
     }
   }
 
+  componentDidMount() {
+    const NO_FLEX = ' no-flex';
+    const tabNode = findDOMNode(this);
+    if (tabNode && !isFlexSupported() && tabNode.className.indexOf(NO_FLEX) === -1) {
+      tabNode.className += NO_FLEX;
+    }
+  }
+
   render() {
     let {
       prefixCls,

components/tabs/style/index.less

@@ -313,10 +313,10 @@
 .@{tab-prefix-cls}-no-animation,
 .@{tab-prefix-cls}-vertical {
   > .@{tab-prefix-cls}-content {
-    > &-animated {
-      transform: none!important;
+    &-animated {
+      transform: none !important;
+      margin-left: 0 !important;
     }
-
     > .@{tab-prefix-cls}-tabpane-inactive {
       display: none;
     }