我正试图为我的网站制作垂直浮动按钮,但这就是我得到的。 文字在框外
CSS
#feedback {
height: 104px;
width: 104px;
position: fixed;
top: 40%;
z-index: 999;
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: #f00;
height: 15px;
width: 70px;
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: #06c;
}
HTML
<div id="feedback">
<a href="/feedback_url/">Test</a>
</div>
答案 0 :(得分:1)
height: 15px
是导致此问题的原因。否则一切都很好。从height
中移除#feedback a
即可。
#feedback a {
display: block;
background: #f00;
height: 15px; /* Remove this... */
元素的高度通常由内容和line-height
设置。如果您尝试手动设置,它将与内容脱离上下文。这就是现在发生的事情。