Question

以下是我的小提琴，我试图在右边制作粘滞按钮。我面临的问题是它不是垂直中心对齐而且它不适用于IE 9.请告诉我如何解决这个问题。

#feedback { 
                height: 0px; 
                width: 65px; 
                position: fixed; 
                right: 0;
                top: 55%; 
                z-index: 1000;
                transform: rotate(-90deg);
                -webkit-transform: rotate(-90deg); 
                -moz-transform: rotate(-90deg); 
                -o-transform: rotate(-90deg); 
                filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
            }

            #feedback a { 
                display: block; 
                background: #06c; 
                height: 15px; 
                width: 165px; 
                padding: 8px 16px;
                color: #fff; 
                font-family: Arial, sans-serif; 
                font-size: 17px; 
                font-weight: bold; 
                text-decoration: none; 
                border-bottom: solid 1px #333; border-left: solid 1px #333; border-right: solid 1px #fff;
            }

            #feedback a:hover { 
                background: #CCC; 
            }

Answer 1

this fiddle?

怎么样？

CSS：

.center{
   position: fixed;
   top: 50%;
   right: 0px;
   width: 115px;
   height: 0px;
   text-align:right;
   z-index:9999;
   margin-top:-15px;
}

.center a{
   transform: rotate(-90deg);
   -webkit-transform: rotate(-90deg); 
   -moz-transform: rotate(-90deg); 
   -o-transform: rotate(-90deg); 
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
   display: block; 
   background: #06c; 
   text-align:center;
   height: 15px; 
   width: 165px;
   padding: 8px 16px;
   color: #fff; 
   font-family: Arial, sans-serif; 
   font-size: 17px; 
   font-weight: bold; 
   text-decoration: none; 
   border-bottom: solid 1px #333; border-left: solid 1px #333; border-right: solid 1px #fff;

}

.center a:hover { 
   background: #CCC; 
}

Answer 2

<style>
body {margin:0;}

.navbar {
  overflow: hidden;
  background-color: #999;
  position: fixed;
  top: 35%;
  width: 50%;
}

.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

</style>

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<div class="navbar">
  <a href="tel:+91"><b>Toll Free: +91 (Type Number)</b></a>
</div>
</body>
</html>

粘滞固定右按钮

2 个答案: