我在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 */}


瞧,该按钮将不再移动,您只需要为该位置定义一些坐标

10-07 19:06
查看更多