按钮在野生动物园上显示多次

Question

我在容器内有一个按钮，该按钮在现代浏览器（甚至是IE11）中也应能正常工作，但由于某些原因，该按钮被重复并嵌套在它的可滚动标注中（该按钮未嵌套在代码中的标注中）完全没有）。

这是我的代码：

.buttonContainer {
   position: fixed;
   width: 319px;
   height: 62px;
   background-color: #fff;
   display: inline-block;
   text-align: center;
   vertical-align: middle;
   margin-bottom: 10px;
   box-shadow: 0 0 2px 0 #d2d2d2;

}


.button {

    position: fixed;
    left: 39%;
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);

   .color {
       background-color: #ff0033;
       color: #ffffff;
       display: inline-block;
       height: 26px;
       width: 64px;
       margin-top:10%;
       padding: 8px 16px;
       font-size: 14px;
       cursor: pointer;
       text-align: center;
       vertical-align: middle;
       line-height: 28px;
   }
}

上方的按钮将在其上方的滚动式标注容器中重复多次。在代码中，按钮根本没有嵌套。它的按钮容器中只有按钮。