2

以下是我试图在右侧制作粘性按钮的小提琴。我面临的问题是它没有垂直居中对齐并且它不能在 IE 9 上运行。请让我知道我该如何解决这个问题。

小提琴：http : //jsfiddle.net/Zw8Sb/

#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; 
            }
4

2 回答 2

5

这个小提琴怎么样？

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; 
}
于 2013-11-14T09:48:42.523 回答
-1 

<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>

于 2017-07-21T19:32:16.540 回答