Css 使按钮适合每个浏览器

我的网站有问题。我创建了一个按钮，可以打开聊天室。但是，在所有浏览器和屏幕监视器中，此按钮都不在正确的位置。由于浏览器的缩放，按钮不会保持我想要的状态

这是我的页面：

聊天按钮需要紧跟在方框后面，如下图所示：

但在其他浏览器中，按钮会一直向右移动。 以下是我的css：

<style>

* { /* trying to RESET CSS */
  margin: 0;
  padding: 0;
  list-style: none;
  vertical-align: baseline;
}

#tab /* the button CHAT */{
  min-width: 50px;
  min-height: 19px;
  max-width: 50px;
  max-height: 19px;
  position: absolute;
  right: 27%;
/*float: left;*/
  top: 350px;
  display: block;
  cursor: pointer;
  background-image: url('http://www.assembleia.org.br/site/wp-content/uploads/2013/01/buttonchat.png');
  color: white;
}

#panel /* the panel */ {
  min-height: 367px;
  position:absolute;
  left: 1355px;
  top: 171px;
  background-color: #D4D4D4;
  max-height: 367px;
  min-width: 0; /*new line*/
}

#panel .content /* for the chat */ {
  min-width: 100px;
  text-align: center;
  /*margin-right:300px;*/
  margin-right: auto;
  max-width: 100px;
}

#close /* for the little red X after opening the chat */ {
  position: absolute;
  left: 1758px;
  top: 168px;
  background-image: url('http://www.assembleia.org.br/site/wp-content/uploads/2013/01/buttonclose1.png');
  text-decoration: none;
}

#share /* for facebook sharing after opening the chat */ {
  position: absolute;
  left: 1656px;
  top: 540px;
  font-size: 10px;
  font-family: Verdana,sans-serif;
}

</style>

*{/*正在尝试重置CSS*/
保证金：0；
填充：0；
列表样式：无；
垂直对齐：基线；
}
#tab/*点击聊天按钮*/{
最小宽度：50px；
最小高度：19px；
最大宽度：50px；
最大高度：19px；
位置：绝对位置；
右：27%；
/*浮动：左*/
顶部：350px；
显示：块；
光标：指针；
背景图像：url（'http://www.assembleia.org.br/site/wp-content/uploads/2013/01/buttonchat.png');
颜色：白色；
}
#面板/*面板*/{
最小高度：367px；
位置：绝对位置；
左：1355px；
顶部：171像素；
背景色：#D4；
最大高度：367px；
最小宽度：0；/*新行*/
}
#panel.content/*用于聊天*/{
最小宽度：100px；
文本对齐：居中；
/*右边距：300px*/
右边距：自动；
最大宽度：100px；
}
#打开聊天后，关闭小红X的/*/{
位置：绝对位置；
左：1758px；
顶部：168px；
背景图像：url（'http://www.assembleia.org.br/site/wp-content/uploads/2013/01/buttonclose1.png');
文字装饰：无；
}
#打开聊天室后共享/*用于facebook共享*/{
位置：绝对位置；
左：1656px；
顶部：540px；
字体大小：10px；
字体系列：Verdana，无衬线；
}

---

Thx.

使用位置：相对属性，然后更改#选项卡CSS，如下所示：

• 添加位置：绝对位置
• 从上到下：50%
• 右转：25px

这是使用Firebug测试的，应该会产生预期的效果。

使用此选项

#tab {
min-width: 50px;
min-height: 19px;
max-width: 50px;
max-height: 19px;
position: absolute;
right: 50px;
top: 350px;
display: block;
cursor: pointer;
background-image: url('http://www.assembleia.org.br/site/wp-content/uploads/2013/01/buttonchat.png');
color: white;
}

---

试图把位置：相对；在#面板上。内容和无效。然后试图把位置：相对；在#面板上，将#选项卡更改为顶部：30%，右侧：27%——在我的浏览器上工作，但在其他桌面上不工作。非常感谢。如果你完全按照我告诉你的去做，那就行了。否则，它就不会。如果这是答案，那么请将其标记为“是”。必须正确更改：27%可以在我的笔记本上使用，但不能在桌面上使用。非常感谢你！不要使用“%”。我不知道为什么，但我认为px比%好。同样改变顶部：350px；