css - HTML5 设计的网站 - 在 Chrome 和 Opera 中查看时固定按钮不再保持固定

Question

我在 2014 年 4 月将网站 susanadantas.com 设计为一个类(class)元素，并在完成时“立即预订皮肤咨询!”按钮被设置为定位和功能在右上角区域。该站点还通过了 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

谢谢

Answer 1

添加这个:

div#centeredonpage{position:relative}
.bookconsultbtn{top: 20px; right: 20px; /*or adjust at will */}

瞧，那个按钮不会再移动了，你只需要为位置定义一些坐标