css - 使按钮适合所有浏览器

标签 css browser cross-browser zooming

我的网站有问题。我创建了一个可以打开聊天的按钮。但是这个按钮不会在所有浏览器和屏幕监视器中都位于正确的位置。由于浏览器缩放,按钮不会像我想要的那样停留。

这是我的页面:http://www.assembleia.org.br/site/webtv/

CHAT 按钮需要紧跟在方框之后,就像这张照片:http://imageshack.us/photo/my-images/20/cssfix.jpg/

但在其他浏览器中,按钮会向右和向右移动。 这是我的 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>

谢谢..

最佳答案

使用这个

#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;
}

关于css - 使按钮适合所有浏览器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14352029/

相关文章:

javascript - 无法通过 Firefox 中的键获取存储的对象值

jquery - 响应式标题/幻灯片没有响应 - 可能是由幻灯片引起的

javascript - CSS3 过渡效果问题

css - 不透明度和叠加层 : the algorithm

java - 使 java applet 符合高安全标准

javascript - 如何使用控制台检查滚动位置?

html - 缩放错误不会出现在 Internet Explorer 中,但会出现在我测试过的所有其他浏览器中

javascript - 更改 AmCharts 股票图表中图形的颜色

javascript - 关于输入类型="number"在手机中打开数字键盘但如何打开输入类型="password"的小键盘

css - 使非常简单的 html 页面跨浏览器与 CSS 兼容