我在4月14日将susanadantas.com网站设计为课程项目,并在完成时“今天预订皮肤咨询!”按钮被设置为在右上区域定位并起作用。该网站还通过了W3C CSS和标记中的验证。
我最近检查了该站点,以查看一切是否仍然正常运行,并且在Chrome和Opera中,就像光标靠近按钮一样,该按钮水平向左移动。如果刷新浏览器,它将返回正确的位置。
我一直在寻找答案,并与我的教练联系,希望获得帮助,但到目前为止,我仍然没有任何解释或解决方案。
HTML5代码:
<div><a href="contact.html"><img class="bookconsultbtn" src="images/button.png" width="230" height="40" alt="Skin Consultation Button" /></a></div>
CSS代码:
.bookconsultbtn
{
position: absolute;
margin-top: 15px;
margin-left: 180px;
-webkit-transition:width 2s; /* For Safari 3.1 to 6.0 */
-webkit-transition:height 2s; /* For Safari 3.1 to 6.0 */
transition:width 2s;
}
.bookconsultbtn:hover
{
box-shadow: 0 0 14px rgb(245, 130, 32);
width: 240px;
height: 50px;
}
http://susanadantas.com/Susana_Dantas/index.html
谢谢
最佳答案
添加以下内容:
div#centeredonpage{position:relative}
.bookconsultbtn{top: 20px; right: 20px; /*or adjust at will */}
瞧,该按钮将不再移动,您只需要为该位置定义一些坐标