Merge pull request #437 from ant-design/ie8-button-radius-support

support border radius in ie8 via css3pie

components/button/button.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import rcUtil from 'rc-util';
+import { findDOMNode } from 'react-dom';
 
 const rxTwoCNChar = /^[\u4e00-\u9fa5]{2,2}$/;
 const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
@@ -24,6 +25,11 @@ function insertSpace(child) {
 }
 
 export default class Button extends React.Component {
+  componentDidMount() {
+    if (window && window.PIE) {
+      window.PIE.attach(findDOMNode(this));
+    }
+  }
   render() {
     const props = this.props;
     const {type, shape, size, onClick, className, htmlType, children, ...others} = props;

components/button/index.md

@@ -29,3 +29,17 @@ loading | 设置按钮载入状态，存在为 `true`，不存在为 `false`，
 onClick | `click` 事件的 handler | Function | `function() {}`
 
 - `<Button>Hello world!</Button>` 最终会被渲染为 `<button>Hello world!</button>`，并且除了上表中的属性，其它属性都会直接传到 `<button></button>`
+
+
+### IE8 border radius support
+
+Ant Design 视觉上采用渐进降级的方案，在 IE8 下圆角按钮将降级为直角。
+如果强烈需要圆角按钮，我们提供了 [css3pie](http://css3pie.com/) 的兼容方案。
+
+使用时只需在 html 头部加入以下代码即可。
+
+```html
+<!--[if IE 8]>
+<script src="https://t.alipayobjects.com/images/rmsweb/T1q8JiXftaXXXXXXXX.js"></script>
+<![endif]-->
+```

site/templates/layout.html

@@ -15,6 +15,9 @@
     <link rel="stylesheet" href="{{static_url('../dist/demo.css')}}">
     <link rel="stylesheet" href="{{static_url('style.css')}}">
     <link rel="stylesheet" href="{{static_url('tomorrow.css')}}">
+    <!--[if IE 8]>
+    <script src="https://t.alipayobjects.com/images/rmsweb/T1q8JiXftaXXXXXXXX.js"></script>
+    <![endif]-->
     <script>
       (function (con) {
         'use strict';

style/mixins/button.less

@@ -86,6 +86,9 @@
   .user-select(none);
   .transition(all .3s @ease-in-out);
   transform: translate3d(0, 0, 0);
+  // Fix for ie8 border-radius
+  // http://css3pie.com/documentation/known-issues/#z-index
+  position: relative\0;
 
   > .@{iconfont-css-prefix} {
     line-height: 1;