最新的Google Chrome浏览器出现图片重叠问题

时间:2014-03-12 06:40:54

标签: html css html5 css3 google-chrome

我一直在使用Google Chrome网络浏览器Version 32.0.1700.107 m时遇到问题。让我给你一个问题的简单示意图。

我有以下(伪)HTML来显示两个图像 - 背景和顶部的可点击链接:

<body>
<div class="page">
 <div class="tabs">
 </div>
 <div id="tab_twitter">
  <a href="http://twitter.com/name" title="Follow On Twitter" target="_blank">
  <img border="0" src="images/twtr_logo.png">
  </a>
 </div>
</div>
</body>

CSS定义如下:

.page {
    background-image: url("images/top_bkgnd.png");
    background-repeat: repeat-x;
    color: #333333;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 15%;
    top: 0;
    width: 85%;
    height: 100%;
}

.tabs {
    background-image: url("images/tabs_twtr.png");
    background-repeat: no-repeat;
    margin-top: 60px;
    margin-left: 0px;
    position: absolute;
    top: 0;
    width: 309px;
    height: 153px;
}

#tab_twitter {
    margin-left: 219px;
    position: absolute;
    top: 166px;
}

大致创建以下布局:

enter image description here

当我的tab_twitter div不可见且无法点击时,Google Chrome上会出现此问题。请注意,这在最新的IE和Firefox上已经确定。它也曾用于以前版本的Chrome。

知道我在这里做错了什么吗?

0 个答案:

没有答案