Question

我将网站susanadantas.com设计为4月14日的课程项目，并在完成时＃34;立即预约皮肤咨询！＆＃34;按钮设置为定位并在右上区域中起作用。该网站还通过了W3C CSS和Markup的验证。

我最近检查了网站，看看是否所有内容仍在运行，在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 */}

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

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

1 个答案: