fix docs in ie9

examples/docs/zh-cn/button.md

@@ -1,4 +1,5 @@
 <script>
+  import { addClass } from 'wind-dom/src/class';
   export default {
     data() {
       return {
@@ -16,7 +17,7 @@
       this.$nextTick(() => {
         let demos = document.querySelectorAll('.source');
         let thirdDemo = demos[2];
-        thirdDemo.classList.add('intro-block');
+        addClass(thirdDemo, 'intro-block');
       });
     }
   }

examples/docs/zh-cn/pagination.md

@@ -108,6 +108,7 @@
 ```
 :::
 <script>
+  import { addClass } from 'wind-dom/src/class';
   export default {
     methods: {
       handleSizeChange(val) {
@@ -122,8 +123,8 @@
         let demos = document.querySelectorAll('.source');
         let firstDemo = demos[0];
         let lastDemo = demos[demos.length - 1];
-        firstDemo.classList.add('first');
+        addClass(firstDemo, 'first');
-        lastDemo.classList.add('last');
+        addClass(lastDemo, 'last');
       });
     }
   }
@@ -131,15 +132,16 @@
 <style>
   .demo-pagination .source.first {
     padding: 0;
-    display: flex;
   }
 
   .demo-pagination .first .block {
-    display: inline-block;
     padding: 30px 0;
     text-align: center;
     border-right: solid 1px #EFF2F6;
-    flex: 1;
+    float: left;
+    width: 50%;
+    box-sizing: border-box;
+
     &:last-child {
       border-right: none;
     }

examples/docs/zh-cn/rate.md

@@ -13,18 +13,18 @@
       this.$nextTick(() => {
         let firstDemo = document.querySelector('.source');
         firstDemo.style.padding = '0';
-        firstDemo.style.display = 'flex';
       });
     }
   }
 </script>
 <style>
   .demo-rate .block {
-    display: inline-block;
     padding: 30px 0;
     text-align: center;
     border-right: solid 1px #EFF2F6;
-    flex: 1;
+    float: left;
+    width: 50%;
+    box-sizing: border-box;
     &:last-child {
       border-right: none;
     }

examples/docs/zh-cn/tooltip.md

@@ -7,19 +7,11 @@
     }
   };
 </script>
-
-## Tooltip 文字提示
-
-常用于展示鼠标 hover 时的提示信息。
-
-### 基础用法
-
-在这里我们提供 9 种不同方向的展示方式，可以通过以下完整示例来理解，选择你要的效果。
-
-:::demo 使用`content`属性来决定`hover`时的提示信息。由`placement`属性决定展示效果：`placement`属性值为：`方向-对齐位置`；四个方向：`top`、`left`、`right`、`bottom`；三种对齐位置：`start`, `end`，默认为空。如`placement="left-end"`，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。
-
-```html
 <style>
+  .demo-tooltip {
+    .el-tooltip + .el-tooltip {
+      margin-left: 15px;
+    }
     .box {
       width: 400px;
 
@@ -50,9 +42,24 @@
       .right .el-tooltip__popper {
         padding: 8px 10px;
       }
+      .el-tooltip {
+        margin-left: 0;
+      }
+    }
   }
 </style>
 
+## Tooltip 文字提示
+
+常用于展示鼠标 hover 时的提示信息。
+
+### 基础用法
+
+在这里我们提供 9 种不同方向的展示方式，可以通过以下完整示例来理解，选择你要的效果。
+
+:::demo 使用`content`属性来决定`hover`时的提示信息。由`placement`属性决定展示效果：`placement`属性值为：`方向-对齐位置`；四个方向：`top`、`left`、`right`、`bottom`；三种对齐位置：`start`, `end`，默认为空。如`placement="left-end"`，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。
+
+```html
 <div class="box">
   <div class="top">
     <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">