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,6 +7,47 @@
     }
   };
 </script>
+<style>
+  .demo-tooltip {
+    .el-tooltip + .el-tooltip {
+      margin-left: 15px;
+    }
+    .box {
+      width: 400px;
+
+      .top {
+        text-align: center;
+      }
+
+      .left {
+        float: left;
+        width: 60px;
+      }
+
+      .right {
+        float: right;
+        width: 60px;
+      }
+
+      .bottom {
+        clear: both;
+        text-align: center;
+      }
+
+      .item {
+        margin: 4px;
+      }
+
+      .left .el-tooltip__popper,
+      .right .el-tooltip__popper {
+        padding: 8px 10px;
+      }
+      .el-tooltip {
+        margin-left: 0;
+      }
+    }
+  }
+</style>
 
 ## Tooltip 文字提示
 
@@ -19,40 +60,6 @@
 :::demo 使用`content`属性来决定`hover`时的提示信息。由`placement`属性决定展示效果：`placement`属性值为：`方向-对齐位置`；四个方向：`top`、`left`、`right`、`bottom`；三种对齐位置：`start`, `end`，默认为空。如`placement="left-end"`，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。
 
 ```html
-<style>
-  .box {
-    width: 400px;
-
-    .top {
-      text-align: center;
-    }
-
-    .left {
-      float: left;
-      width: 60px;
-    }
-
-    .right {
-      float: right;
-      width: 60px;
-    }
-
-    .bottom {
-      clear: both;
-      text-align: center;
-    }
-
-    .item {
-      margin: 4px;
-    }
-
-    .left .el-tooltip__popper,
-    .right .el-tooltip__popper {
-      padding: 8px 10px;
-    }
-  }
-</style>
-
 <div class="box">
   <div class="top">
     <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">