Question

我在页面顶部有一个功能区，里面有一些DIV：

<div id="headerRibbon">
    <span id="socialIcons">
        <a title="WMED Homepage" href="Default.aspx"><img src="theImages/wmlogo.png" width="219" height="47" alt="WMED Homepage" title="WMED Homepage" /></a>
    </span>
    <span id="socialIcons2">
        <table cellpadding=0>
            <tr>
                <td id="socialIconTD"><a href="http://www.facebook.com/pages/"><img alt="LikeFacebook" title="LikeFacebook" src="theImages/facebook.png" class="fbClass" width="35" height="35" /></a></td>
                <td id="socialIconTD"><a href="http://twitter.com/"><img alt="FollowTwitter" title="FollowTwitter" src="theImages/twitter.png" class="twClass" id="tw" width="35" height="35" /></a></td>
                <td id="socialIconTD"><a href="http://www.linkedin.com/"><img alt="ConnectLinkedIn" title="ConnectLinkedIn" src="theImages/linkedin.png" class="liClass" id="li" width="35" height="35" /></a></td>
                <td id="socialIconTD"><a href="http://www.youtube.com/user/"><img alt="WatchYouTube" title="WatchYoutube" src="theImages/youtube.png" class="ytClass" id="yt" width="35" height="35" /></a></td>
                <td id="socialIconTD"><a href="http://pinterest.com/"><img alt="PinPinterest" title="Pin Pinterest" src="theImages/pinterest.png" class="ptClass" id="pt" width="35" height="35" /></a></td>
                <td id="socialIconTD"><a href="https://plus.google.com/"><img alt="+1Google Plus" title="+1Google Plus" src="theImages/googleplus.png" class="gpClass" id="gp" width="35" height="35" /></a></td>
            </tr>
        </table>
    </span>
    <span id="tSearch">
        <form method="post" action="http://www.google.com">
            <input name="" type="text" size="40" placeholder="Search WMED" />
        </form>
    </span>
</div>

在IE11 / FF / Chrome中效果很好但在IE8中却不行。在IE8中，似乎有一个叠加层位于所有图标之上。

在IE11 / FF / Chrome中，它显示如下，允许我点击社交图标并点击左侧的徽标，并在搜索框中输入文字：

enter image description here

在IE8中有一个叠加层，导致所有内容都在下方，我无法点击任何社交图标/徽标或在搜索框中输入任何文字：

enter image description here

这是CSS：

#headerRibbon {
    position: fixed;
    background: url('../theImages/bg_80_w.png');
    height: 62px;
    width: 100%;
    z-index: 18;
    display: none;
    top: 0;
}
#socialIcons {
    position: absolute;
    top: 20%;
    left: 40px;
    z-index: 5;
}
#socialIcons2 {
    position: absolute;
    left: 40%;
    z-index: 5;
    height: 62px;
    top: 20%;
}
#tSearch {
    position: absolute;
    z-index: -5;
    right: 10px;
}
#tSearch input[type="text"] {
    background: url(theImages/search-white.png) no-repeat 10px 6px #135C9D;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #d7d7d7;
    width:150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); 
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }

#tSearch input[type="text"]:focus {
    background: url(theImages/search-dark.png) no-repeat 10px 6px #187DD2;
    color: #FFFFFF;
    width: 175px;
    -webkit-box-shadow: 0 1px 0 rgba(208, 208, 208, 0.8), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    -moz-box-shadow: 0 1px 0 rgba(208, 208, 208, 0.8), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    box-shadow: 0 1px 0 rgba(208, 208, 208, 0.8), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

如果我删除了tSearch范围，则会显示正常。

我该如何解决？

Answer 1

您是否申报了DOCTYPE？

<!DOCTYPE html>

为什么DIV中的SPAN不可点击

1 个答案: